测试
*/
createElement(tagName, property, attributes) {
let tempElement = PopsCore.document.createElement(tagName);
if (typeof property === "string") {
tempElement.innerHTML = property;
return tempElement;
}
if (property == null) {
property = {};
}
if (attributes == null) {
attributes = {};
}
Object.keys(property).forEach((key) => {
let value = property[key];
tempElement[key] = value;
});
Object.keys(attributes).forEach((key) => {
let value = attributes[key];
if (typeof value === "object") {
value = JSON.stringify(value);
} else if (typeof value === "function") {
value = value.toString();
}
tempElement.setAttribute(key, value);
});
return tempElement;
}
/**
* 获取文字的位置信息
* @param input 输入框
* @param selectionStart 起始位置
* @param selectionEnd 结束位置
* @param debug 是否是调试模式
* + true 不删除临时节点元素
* + false 删除临时节点元素
*/
getTextBoundingRect(input, selectionStart, selectionEnd, debug) {
if (!input || !("value" in input))
return input;
if (typeof selectionStart == "string")
selectionStart = parseFloat(selectionStart);
if (typeof selectionStart != "number" || isNaN(selectionStart)) {
selectionStart = 0;
}
if (selectionStart < 0)
selectionStart = 0;
else
selectionStart = Math.min(input.value.length, selectionStart);
if (typeof selectionEnd == "string")
selectionEnd = parseFloat(selectionEnd);
if (typeof selectionEnd != "number" || isNaN(selectionEnd) || selectionEnd < selectionStart) {
selectionEnd = selectionStart;
}
if (selectionEnd < 0)
selectionEnd = 0;
else
selectionEnd = Math.min(input.value.length, selectionEnd);
if (typeof input.createTextRange == "function") {
var range = input.createTextRange();
range.collapse(true);
range.moveStart("character", selectionStart);
range.moveEnd("character", selectionEnd - selectionStart);
return range.getBoundingClientRect();
}
var offset = getInputOffset(), topPos = offset.top, leftPos = offset.left, width = getInputCSS("width", true), height = getInputCSS("height", true);
var cssDefaultStyles = "white-space:pre;padding:0;margin:0;", listOfModifiers = [
"direction",
"font-family",
"font-size",
"font-size-adjust",
"font-variant",
"font-weight",
"font-style",
"letter-spacing",
"line-height",
"text-align",
"text-indent",
"text-transform",
"word-wrap",
"word-spacing"
];
topPos += getInputCSS("padding-top", true);
topPos += getInputCSS("border-top-width", true);
leftPos += getInputCSS("padding-left", true);
leftPos += getInputCSS("border-left-width", true);
leftPos += 1;
for (var i2 = 0; i2 < listOfModifiers.length; i2++) {
var property = listOfModifiers[i2];
cssDefaultStyles += property + ":" + getInputCSS(property) + ";";
}
var text = input.value || "G", textLen = text.length, fakeClone = document.createElement("div");
if (selectionStart > 0)
appendPart(0, selectionStart);
var fakeRange = appendPart(selectionStart, selectionEnd);
if (textLen > selectionEnd)
appendPart(selectionEnd, textLen);
fakeClone.style.cssText = cssDefaultStyles;
fakeClone.style.position = "absolute";
fakeClone.style.top = topPos + "px";
fakeClone.style.left = leftPos + "px";
fakeClone.style.width = width + "px";
fakeClone.style.height = height + "px";
PopsCore.document.body.appendChild(fakeClone);
var returnValue = fakeRange.getBoundingClientRect();
if (!debug)
fakeClone.parentNode.removeChild(fakeClone);
return returnValue;
function appendPart(start, end) {
var span = document.createElement("span");
span.style.cssText = cssDefaultStyles;
span.textContent = text.substring(start, end);
fakeClone.appendChild(span);
return span;
}
function getInputOffset() {
var body = document.body, win = document.defaultView, docElem = document.documentElement, box = document.createElement("div");
box.style.paddingLeft = box.style.width = "1px";
body.appendChild(box);
var isBoxModel = box.offsetWidth == 2;
body.removeChild(box);
box = input.getBoundingClientRect();
var clientTop = docElem.clientTop || body.clientTop || 0, clientLeft = docElem.clientLeft || body.clientLeft || 0, scrollTop = (
// @ts-ignore
win.pageYOffset || isBoxModel && docElem.scrollTop || body.scrollTop
), scrollLeft = (
// @ts-ignore
win.pageXOffset || isBoxModel && docElem.scrollLeft || body.scrollLeft
);
return {
// @ts-ignore
top: box.top + scrollTop - clientTop,
// @ts-ignore
left: box.left + scrollLeft - clientLeft
};
}
function getInputCSS(prop, isnumber) {
var val = PopsCore.document.defaultView.getComputedStyle(input, null).getPropertyValue(prop);
return isnumber ? parseFloat(val) : val;
}
}
/**
* 使用className来隐藏元素
* @param ele
* @param isImportant 是否使用!important
*/
cssHide(ele, isImportant = false) {
if (ele == null) {
return;
}
if (isImportant) {
ele.classList.add("pops-hide-important");
} else {
ele.classList.add("pops-hide");
}
}
/**
* cssHide的反向使用
* @param ele
*/
cssShow(ele) {
if (ele == null) {
return;
}
ele.classList.remove("pops-hide-important");
ele.classList.remove("pops-hide");
}
parseHTML(html, useParser = false, isComplete = false) {
function parseHTMLByDOMParser() {
let parser = new DOMParser();
if (isComplete) {
return parser.parseFromString(html, "text/html");
} else {
return parser.parseFromString(html, "text/html").body.firstChild;
}
}
function parseHTMLByCreateDom() {
let tempDIV = PopsCore.document.createElement("div");
tempDIV.innerHTML = html;
if (isComplete) {
return tempDIV;
} else {
return tempDIV.firstChild;
}
}
if (useParser) {
return parseHTMLByDOMParser();
} else {
return parseHTMLByCreateDom();
}
}
/**
* 函数在元素内部末尾添加子元素或HTML字符串
* @param element 目标元素
* @param content 子元素或HTML字符串
* @example
* // 元素a.xx的内部末尾添加一个元素
* DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
* DOMUtils.append("a.xx","'")
* */
append(element, content) {
if (typeof element === "string") {
element = PopsCore.document.querySelector(element);
}
if (element == null) {
return;
}
function elementAppendChild(ele, text) {
if (typeof content === "string") {
ele.insertAdjacentHTML("beforeend", text);
} else {
ele.appendChild(text);
}
}
if (Array.isArray(content) || content instanceof NodeList) {
let fragment = PopsCore.document.createDocumentFragment();
content.forEach((ele) => {
if (typeof ele === "string") {
ele = this.parseHTML(ele, true, false);
}
fragment.appendChild(ele);
});
element.appendChild(fragment);
} else {
elementAppendChild(element, content);
}
}
/**
* 把元素标签添加到head内
*/
appendHead($ele) {
if (PopsCore.document.head) {
PopsCore.document.head.appendChild($ele);
} else {
PopsCore.document.documentElement.appendChild($ele);
}
}
/**
* 把元素添加进body内
* @param $ele
*/
appendBody($ele) {
if (PopsCore.document.body) {
PopsCore.document.body.appendChild($ele);
} else {
PopsCore.document.documentElement.appendChild($ele);
}
}
/**
* 判断元素是否已显示或已连接
* @param element
*/
isShow(element) {
return Boolean(element.getClientRects().length);
}
/**
* 用于显示元素并获取它的高度宽度等其它属性
* @param $ele
* @param parent 父元素
*/
showElement($ele, ownParent) {
let $cloneNode = $ele.cloneNode(true);
$cloneNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
let $parent = PopsCore.document.documentElement;
let $root = $ele.getRootNode();
if (ownParent == null) {
if ($root == $ele) {
$parent = PopsCore.document.documentElement;
} else {
$parent = $root;
}
} else {
$parent = ownParent;
}
$parent.appendChild($cloneNode);
return {
/**
* 强制显示的克隆的元素
*/
cloneNode: $cloneNode,
/**
* 恢复修改的style
*/
recovery() {
$cloneNode.remove();
}
};
}
/**
* 获取元素上的Float格式的属性px
* @param element
* @param styleName style名
*/
getStyleValue(element, styleName) {
let view = null;
let styles = null;
if (element instanceof CSSStyleDeclaration) {
styles = element;
} else {
view = element.ownerDocument.defaultView;
if (!view || !view.opener) {
view = window;
}
styles = view.getComputedStyle(element);
}
let value = parseFloat(styles[styleName]);
if (isNaN(value)) {
return 0;
} else {
return value;
}
}
/**
* 在元素前面添加兄弟元素或HTML字符串
* @param element 目标元素
* @param content 兄弟元素或HTML字符串
* @example
* // 元素a.xx前面添加一个元素
* DOMUtils.before(document.querySelector("a.xx"),document.querySelector("b.xx"))
* DOMUtils.before("a.xx","'")
* */
before(element, content) {
if (typeof element === "string") {
element = PopsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (typeof content === "string") {
element.insertAdjacentHTML("beforebegin", content);
} else {
element.parentElement.insertBefore(content, element);
}
}
/**
* 在元素后面添加兄弟元素或HTML字符串
* @param element 目标元素
* @param content 兄弟元素或HTML字符串
* @example
* // 元素a.xx后面添加一个元素
* DOMUtils.after(document.querySelector("a.xx"),document.querySelector("b.xx"))
* DOMUtils.after("a.xx","'")
* */
after(element, content) {
if (typeof element === "string") {
element = PopsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (typeof content === "string") {
element.insertAdjacentHTML("afterend", content);
} else {
element.parentElement.insertBefore(content, element.nextSibling);
}
}
}
const popsDOMUtils = new PopsDOMUtils();
const PopsInstanceUtils = {
/**
* 获取页面中最大的z-index的元素信息
* @param deviation 获取最大的z-index值的偏移，默认是+1
* @param node 进行判断的元素，默认是document
* @param ignoreCallBack 执行元素处理时调用的函数，返回false可忽略不想要处理的元素
* @example
* Utils.getMaxZIndexNodeInfo();
* > {
* node: ...,
* zIndex: 1001
* }
**/
getMaxZIndexNodeInfo(deviation = 1, target = PopsCore.document, ignoreCallBack) {
deviation = Number.isNaN(deviation) ? 1 : deviation;
const maxZIndexCompare = 2 * Math.pow(10, 9);
let zIndex = 0;
let maxZIndexNode = null;
function isVisibleNode($css) {
return $css.position !== "static" && $css.display !== "none";
}
function queryMaxZIndex($ele) {
if (typeof ignoreCallBack === "function") {
let ignoreResult = ignoreCallBack($ele);
if (typeof ignoreResult === "boolean" && !ignoreResult) {
return;
}
}
const nodeStyle = PopsCore.window.getComputedStyle($ele);
if (isVisibleNode(nodeStyle)) {
let nodeZIndex = parseInt(nodeStyle.zIndex);
if (!isNaN(nodeZIndex)) {
if (nodeZIndex > zIndex) {
zIndex = nodeZIndex;
maxZIndexNode = $ele;
}
}
if ($ele.shadowRoot != null && $ele instanceof ShadowRoot) {
$ele.shadowRoot.querySelectorAll("*").forEach(($shadowEle) => {
queryMaxZIndex($shadowEle);
});
}
}
}
target.querySelectorAll("*").forEach(($ele, index) => {
queryMaxZIndex($ele);
});
zIndex += deviation;
if (zIndex >= maxZIndexCompare) {
zIndex = maxZIndexCompare;
}
return {
node: maxZIndexNode,
zIndex
};
},
/**
* 获取pops所有弹窗中的最大的z-index
* @param deviation
*/
getPopsMaxZIndex(deviation = 1) {
deviation = Number.isNaN(deviation) ? 1 : deviation;
const maxZIndex = 2 * Math.pow(10, 9);
let zIndex = 0;
let maxZIndexNode = null;
function isVisibleNode($css) {
return $css.position !== "static" && $css.display !== "none";
}
Object.keys(pops.config.layer).forEach((layerName) => {
let layerList = pops.config.layer[layerName];
for (let index = 0; index < layerList.length; index++) {
const layer = layerList[index];
let nodeStyle = window.getComputedStyle(layer.animElement);
if (isVisibleNode(nodeStyle)) {
let nodeZIndex = parseInt(nodeStyle.zIndex);
if (!isNaN(nodeZIndex)) {
if (nodeZIndex > zIndex) {
zIndex = nodeZIndex;
maxZIndexNode = layer.animElement;
}
}
}
}
});
zIndex += deviation;
let isOverMaxZIndex = zIndex >= maxZIndex;
if (isOverMaxZIndex) {
zIndex = maxZIndex;
}
return { zIndex, animElement: maxZIndexNode, isOverMaxZIndex };
},
/**
* 获取页面中最大的z-index
* @param deviation 获取最大的z-index值的偏移，默认是+1
* @example
* getMaxZIndex();
* > 1001
**/
getMaxZIndex(deviation = 1) {
return this.getMaxZIndexNodeInfo(deviation).zIndex;
},
/**
* 获取CSS Rule
* @param sheet
* @returns
*/
getKeyFrames(sheet) {
let result2 = {};
Object.keys(sheet.cssRules).forEach((key) => {
if (sheet.cssRules[key].type === 7 && sheet.cssRules[key].name.startsWith("pops-anim-")) {
result2[sheet.cssRules[key].name] = sheet.cssRules[key];
}
});
return result2;
},
/**
* 删除配置中对应的对象
* @param moreLayerConfigList 配置实例列表
* @param guid 唯一标识
* @param isAll 是否全部删除
*/
removeInstance(moreLayerConfigList, guid, isAll = false) {
function removeItem(layerCommonConfig) {
var _a2, _b, _c, _d;
if (typeof layerCommonConfig.beforeRemoveCallBack === "function") {
layerCommonConfig.beforeRemoveCallBack(layerCommonConfig);
}
(_a2 = layerCommonConfig == null ? void 0 : layerCommonConfig.animElement) == null ? void 0 : _a2.remove();
(_b = layerCommonConfig == null ? void 0 : layerCommonConfig.popsElement) == null ? void 0 : _b.remove();
(_c = layerCommonConfig == null ? void 0 : layerCommonConfig.maskElement) == null ? void 0 : _c.remove();
(_d = layerCommonConfig == null ? void 0 : layerCommonConfig.$shadowContainer) == null ? void 0 : _d.remove();
}
moreLayerConfigList.forEach((layerConfigList) => {
layerConfigList.forEach((layerConfigItem, index) => {
if (isAll || layerConfigItem["guid"] === guid) {
if (pops.config.animation.hasOwnProperty(layerConfigItem.animElement.getAttribute("anim"))) {
layerConfigItem.animElement.style.width = "100%";
layerConfigItem.animElement.style.height = "100%";
layerConfigItem.animElement.style["animation-name"] = layerConfigItem.animElement.getAttribute("anim") + "-reverse";
if (pops.config.animation.hasOwnProperty(layerConfigItem.animElement.style["animation-name"])) {
popsDOMUtils.on(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), function() {
removeItem(layerConfigItem);
}, {
capture: true
});
} else {
removeItem(layerConfigItem);
}
} else {
removeItem(layerConfigItem);
}
layerConfigList.splice(index, 1);
}
});
});
return moreLayerConfigList;
},
/**
* 隐藏
* @param popsType
* @param layerConfigList
* @param guid
* @param config
* @param animElement
* @param maskElement
*/
hide(popsType, layerConfigList, guid, config, animElement, maskElement) {
let popsElement = animElement.querySelector(".pops[type-value]");
if (popsType === "drawer") {
let drawerConfig = config;
setTimeout(() => {
maskElement.style.setProperty("display", "none");
if (["top", "bottom"].includes(drawerConfig.direction)) {
popsElement.style.setProperty("height", "0");
} else if (["left", "right"].includes(drawerConfig.direction)) {
popsElement.style.setProperty("width", "0");
} else {
console.error("未知direction：", drawerConfig.direction);
}
}, drawerConfig.closeDelay);
} else {
layerConfigList.forEach((layerConfigItem) => {
if (layerConfigItem.guid === guid) {
layerConfigItem.animElement.style.width = "100%";
layerConfigItem.animElement.style.height = "100%";
layerConfigItem.animElement.style["animation-name"] = layerConfigItem.animElement.getAttribute("anim") + "-reverse";
if (pops.config.animation.hasOwnProperty(layerConfigItem.animElement.style["animation-name"])) {
let animationendCallBack2 = function() {
layerConfigItem.animElement.style.display = "none";
if (layerConfigItem.maskElement) {
layerConfigItem.maskElement.style.display = "none";
}
popsDOMUtils.off(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack2, {
capture: true
});
};
popsDOMUtils.on(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack2, {
capture: true
});
} else {
layerConfigItem.animElement.style.display = "none";
if (layerConfigItem.maskElement) {
layerConfigItem.maskElement.style.display = "none";
}
}
return;
}
});
}
},
/**
* 显示
* @param popsType
* @param layerConfigList
* @param guid
* @param config
* @param animElement
* @param maskElement
*/
show(popsType, layerConfigList, guid, config, animElement, maskElement) {
let popsElement = animElement.querySelector(".pops[type-value]");
if (popsType === "drawer") {
let drawerConfig = config;
setTimeout(() => {
maskElement.style.setProperty("display", "");
let direction = drawerConfig.direction;
let size = drawerConfig.size.toString();
if (["top", "bottom"].includes(direction)) {
popsElement.style.setProperty("height", size);
} else if (["left", "right"].includes(direction)) {
popsElement.style.setProperty("width", size);
} else {
console.error("未知direction：", direction);
}
}, drawerConfig.openDelay);
} else {
layerConfigList.forEach((layerConfigItem) => {
if (layerConfigItem.guid === guid) {
layerConfigItem.animElement.style.width = "";
layerConfigItem.animElement.style.height = "";
layerConfigItem.animElement.style["animation-name"] = layerConfigItem.animElement.getAttribute("anim").replace("-reverse", "");
if (pops.config.animation.hasOwnProperty(layerConfigItem.animElement.style["animation-name"])) {
let animationendCallBack2 = function() {
popsDOMUtils.off(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack2, {
capture: true
});
};
layerConfigItem.animElement.style.display = "";
if (layerConfigItem.maskElement) {
layerConfigItem.maskElement.style.display = "";
}
popsDOMUtils.on(layerConfigItem.animElement, popsDOMUtils.getAnimationEndNameList(), animationendCallBack2, {
capture: true
});
} else {
layerConfigItem.animElement.style.display = "";
if (layerConfigItem.maskElement) {
layerConfigItem.maskElement.style.display = "";
}
}
}
return;
});
}
},
/**
* 关闭
* @param popsType
* @param layerConfigList
* @param guid
* @param config
* @param animElement
*/
close(popsType, layerConfigList, guid, config, animElement) {
let popsElement = animElement.querySelector(".pops[type-value]");
let drawerConfig = config;
function transitionendEvent() {
function closeCallBack(event) {
if (event.propertyName !== "transform") {
return;
}
popsDOMUtils.off(popsElement, popsDOMUtils.getTransitionEndNameList(), void 0, closeCallBack);
PopsInstanceUtils.removeInstance([layerConfigList], guid);
}
popsDOMUtils.on(popsElement, popsDOMUtils.getTransitionEndNameList(), closeCallBack);
let popsTransForm = getComputedStyle(popsElement).transform;
if (popsTransForm !== "none") {
popsDOMUtils.trigger(popsElement, popsDOMUtils.getTransitionEndNameList(), void 0, true);
return;
}
if (["top"].includes(drawerConfig.direction)) {
popsElement.style.setProperty("transform", "translateY(-100%)");
} else if (["bottom"].includes(drawerConfig.direction)) {
popsElement.style.setProperty("transform", "translateY(100%)");
} else if (["left"].includes(drawerConfig.direction)) {
popsElement.style.setProperty("transform", "translateX(-100%)");
} else if (["right"].includes(drawerConfig.direction)) {
popsElement.style.setProperty("transform", "translateX(100%)");
} else {
console.error("未知direction：", drawerConfig.direction);
}
}
if (popsType === "drawer") {
setTimeout(() => {
transitionendEvent();
}, drawerConfig.closeDelay);
} else {
PopsInstanceUtils.removeInstance([layerConfigList], guid);
}
},
/**
* 拖拽元素
* 说明：
* + 元素的position为absolute或者fixed
* + 会为元素的
* @param moveElement 需要拖拽的元素
* @param options 配置
*/
drag(moveElement, options) {
options = Object.assign({
limit: true,
extraDistance: 3,
container: PopsCore.globalThis,
triggerClick: true
}, options);
let isMove = false;
let clickElementLeftOffset = 0;
let clickElementTopOffset = 0;
let AnyTouch = popsUtils.AnyTouch();
let anyTouchElement = new AnyTouch(options.dragElement, {
preventDefault(event) {
if (typeof options.preventEvent === "function") {
return options.preventEvent(event);
} else {
return true;
}
}
});
popsDOMUtils.css(options.dragElement, {
cursor: "move"
});
function getTransform(element) {
var _a2;
let transform_left = 0;
let transform_top = 0;
let elementTransform = PopsCore.globalThis.getComputedStyle(element).transform;
if (elementTransform !== "none" && elementTransform != null && elementTransform !== "") {
let elementTransformSplit = (_a2 = elementTransform.match(/\((.+)\)/)) == null ? void 0 : _a2[1].split(",");
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
}
return {
transformLeft: transform_left,
transformTop: transform_top
};
}
function changeMoveElementStyle(element) {
let old_transitionDuration = element.style.transitionDuration;
if (globalThis.getComputedStyle(element).transitionDuration !== "0s") {
element.style.transitionDuration = "0s";
}
return () => {
element.style.transitionDuration = old_transitionDuration;
};
}
function getContainerWidthOrHeight(container) {
container = container ?? globalThis;
return {
width: popsDOMUtils.width(container),
height: popsDOMUtils.height(container)
};
}
function getContainerTopOrLeft(container) {
container = container ?? globalThis;
if (popsUtils.isWin(container)) {
return {
left: 0,
top: 0
};
} else {
let rect = container.getBoundingClientRect();
return {
left: rect.left,
top: rect.top
};
}
}
let transformInfo = getTransform(moveElement);
let transformLeft = transformInfo.transformLeft;
let transformTop = transformInfo.transformTop;
let resumeMoveElementStyle = null;
anyTouchElement.on("pan", function(event) {
if (!isMove) {
isMove = true;
let rect = options.dragElement.getBoundingClientRect();
clickElementLeftOffset = event.x - rect.left;
clickElementTopOffset = event.y - rect.top;
transformInfo = getTransform(moveElement);
transformLeft = transformInfo.transformLeft;
transformTop = transformInfo.transformTop;
resumeMoveElementStyle = changeMoveElementStyle(moveElement);
}
let currentMoveLeftOffset = event.x - clickElementLeftOffset + transformLeft;
let currentMoveTopOffset = event.y - clickElementTopOffset + transformTop;
if (event.phase === "move") {
if (options.limit) {
let maxLeftOffset = getContainerWidthOrHeight(options.container).width - popsDOMUtils.width(moveElement) + transformLeft;
let { left: minLeftOffset, top: minTopOffset } = getContainerTopOrLeft(options.container);
let maxTopOffset = getContainerWidthOrHeight(options.container).height - popsDOMUtils.height(moveElement) + transformTop;
if (currentMoveLeftOffset > maxLeftOffset) {
currentMoveLeftOffset = maxLeftOffset;
}
if (currentMoveTopOffset > maxTopOffset) {
currentMoveTopOffset = maxTopOffset;
}
if (currentMoveLeftOffset - options.extraDistance * 2 < minLeftOffset + transformLeft) {
currentMoveLeftOffset = minLeftOffset + transformLeft;
currentMoveLeftOffset += options.extraDistance;
} else {
currentMoveLeftOffset -= options.extraDistance;
}
if (currentMoveTopOffset - options.extraDistance * 2 < minTopOffset + transformTop) {
currentMoveTopOffset = minTopOffset + transformTop;
currentMoveTopOffset += options.extraDistance;
} else {
currentMoveTopOffset -= options.extraDistance;
}
}
if (typeof options.moveCallBack === "function") {
options.moveCallBack(moveElement, currentMoveLeftOffset, currentMoveTopOffset);
}
popsDOMUtils.css(moveElement, {
left: currentMoveLeftOffset + "px",
top: currentMoveTopOffset + "px"
});
}
if (event.phase === "end") {
isMove = false;
if (typeof resumeMoveElementStyle === "function") {
resumeMoveElementStyle();
resumeMoveElementStyle = null;
}
if (typeof options.endCallBack === "function") {
options.endCallBack(moveElement, currentMoveLeftOffset, currentMoveTopOffset);
}
}
});
if (options.triggerClick) {
anyTouchElement.on(["tap"], function(event) {
event.changedPoints.forEach((item) => {
popsDOMUtils.trigger(item.target, "click", void 0, true);
});
});
}
},
/**
* 排序数组
* @param getBeforeValueFun
* @param getAfterValueFun
* @param sortByDesc 排序是否降序，默认降序
*/
sortElementListByProperty(getBeforeValueFun, getAfterValueFun, sortByDesc = true) {
if (typeof sortByDesc !== "boolean") {
throw "参数 sortByDesc 必须为boolean类型";
}
if (getBeforeValueFun == null || getAfterValueFun == null) {
throw "获取前面的值或后面的值的方法不能为空";
}
return function(after_obj, before_obj) {
var beforeValue = getBeforeValueFun(before_obj);
var afterValue = getAfterValueFun(after_obj);
if (sortByDesc) {
if (afterValue > beforeValue) {
return -1;
} else if (afterValue < beforeValue) {
return 1;
} else {
return 0;
}
} else {
if (afterValue < beforeValue) {
return -1;
} else if (afterValue > beforeValue) {
return 1;
} else {
return 0;
}
}
};
}
};
var indexCSS = '@charset "utf-8";\r\n.pops * {\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n /* 代替::-webkit-scrollbar */\r\n scrollbar-width: thin;\r\n}\r\n.pops {\r\n --pops-bg-opacity: 1;\r\n --pops-bd-opacity: 1;\r\n --pops-font-size: 16px;\r\n interpolate-size: allow-keywords;\r\n}\r\n.pops-mask {\r\n --pops-mask-bg-opacity: 0.4;\r\n}\r\n.pops {\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n border-radius: 4px;\r\n border: 1px solid rgb(235, 238, 245, var(--pops-bd-opacity));\r\n font-size: var(--pops-font-size);\r\n line-height: normal;\r\n box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);\r\n box-sizing: border-box;\r\n overflow: hidden;\r\n transition: all 0.35s;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n.pops-anim {\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n.pops-anim[anim=""] {\r\n top: unset;\r\n right: unset;\r\n bottom: unset;\r\n left: unset;\r\n width: unset;\r\n height: unset;\r\n transition: none;\r\n}\r\n/* 底部图标动画和样式 */\r\n.pops i.pops-bottom-icon[is-loading="true"] {\r\n animation: rotating 2s linear infinite;\r\n}\r\n.pops i.pops-bottom-icon {\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: inherit;\r\n font-size: inherit;\r\n}\r\n\r\n/* 遮罩层样式 */\r\n.pops-mask {\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: 0;\r\n border-radius: 0;\r\n background-color: rgba(0, 0, 0, var(--pops-mask-bg-opacity));\r\n box-shadow: none;\r\n transition: none;\r\n}\r\n\r\n.pops-header-controls button.pops-header-control[type][data-header] {\r\n float: right;\r\n margin: 0 0;\r\n outline: 0;\r\n border: 0;\r\n border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n background-color: transparent;\r\n color: #888;\r\n cursor: pointer;\r\n}\r\n.pops-header-controls button.pops-header-control[type="max"],\r\n.pops-header-controls button.pops-header-control[type="mise"],\r\n.pops-header-controls button.pops-header-control[type="min"] {\r\n outline: 0 !important;\r\n border: 0;\r\n border-color: rgb(136, 136, 136, var(--pops-bd-opacity));\r\n background-color: transparent;\r\n color: rgb(136, 136, 136);\r\n cursor: pointer;\r\n transition: all 0.3s ease-in-out;\r\n}\r\nbutton.pops-header-control i {\r\n color: rgb(144, 147, 153);\r\n font-size: inherit;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n}\r\nbutton.pops-header-control svg {\r\n height: 1.25em;\r\n width: 1.25em;\r\n}\r\nbutton.pops-header-control {\r\n right: 15px;\r\n padding: 0;\r\n border: none;\r\n outline: 0;\r\n background: 0 0;\r\n cursor: pointer;\r\n position: unset;\r\n line-height: normal;\r\n}\r\nbutton.pops-header-control i:hover {\r\n color: rgb(64, 158, 255);\r\n}\r\n.pops-header-controls[data-margin] button.pops-header-control {\r\n margin: 0 6px;\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops[type-value] .pops-header-controls {\r\n display: flex;\r\n gap: 6px;\r\n}\r\n\r\n/* 标题禁止选中文字 */\r\n.pops [class^="pops"][class*="-title"] p[pops] {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n';
var ninePalaceGridPositionCSS = '.pops[position="top_left"] {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n}\r\n.pops[position="top"] {\r\n position: fixed;\r\n top: 0;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n.pops[position="top_right"] {\r\n position: fixed;\r\n top: 0;\r\n right: 0;\r\n}\r\n.pops[position="center_left"] {\r\n position: fixed;\r\n top: 50%;\r\n left: 0;\r\n transform: translateY(-50%);\r\n}\r\n.pops[position="center"] {\r\n position: fixed;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n.pops[position="center_right"] {\r\n position: fixed;\r\n top: 50%;\r\n right: 0;\r\n transform: translateY(-50%);\r\n}\r\n.pops[position="bottom_left"] {\r\n position: fixed;\r\n bottom: 0;\r\n left: 0;\r\n}\r\n.pops[position="bottom"] {\r\n position: fixed;\r\n bottom: 0;\r\n left: 50%;\r\n transform: translate(-50%, 0);\r\n}\r\n.pops[position="bottom_right"] {\r\n position: fixed;\r\n right: 0;\r\n bottom: 0;\r\n}\r\n';
var scrollbarCSS = "/* firefox上暂不支持::-webkit-scrollbar */\r\n.pops ::-webkit-scrollbar {\r\n width: 6px;\r\n height: 0;\r\n}\r\n\r\n.pops ::-webkit-scrollbar-track {\r\n width: 0;\r\n}\r\n.pops ::-webkit-scrollbar-thumb:hover {\r\n background: rgb(178, 178, 178, var(--pops-bg-opacity));\r\n}\r\n.pops ::-webkit-scrollbar-thumb {\r\n min-height: 28px;\r\n border-radius: 2em;\r\n background: rgb(204, 204, 204, var(--pops-bg-opacity));\r\n background-clip: padding-box;\r\n}\r\n";
var buttonCSS = '.pops {\r\n --button-font-size: 14px;\r\n --button-height: 32px;\r\n --button-color: rgb(51, 51, 51);\r\n --button-bd-color: rgb(220, 223, 230, var(--pops-bd-opacity));\r\n --button-bg-color: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n --button-margin-top: 0px;\r\n --button-margin-bottom: 0px;\r\n --button-margin-left: 5px;\r\n --button-margin-right: 5px;\r\n --button-padding-top: 6px;\r\n --button-padding-bottom: 6px;\r\n --button-padding-left: 12px;\r\n --button-padding-right: 12px;\r\n --button-radius: 4px;\r\n\r\n --container-title-height: 55px;\r\n --container-bottom-btn-height: 55px;\r\n}\r\n.pops[data-bottom-btn="false"] {\r\n --container-bottom-btn-height: 0px;\r\n}\r\n.pops button {\r\n white-space: nowrap;\r\n float: right;\r\n display: inline-block;\r\n margin: var(--button-margin-top) var(--button-margin-right)\r\n var(--button-margin-bottom) var(--button-margin-left);\r\n padding: var(--button-padding-top) var(--button-padding-right)\r\n var(--button-padding-bottom) var(--button-padding-left);\r\n outline: 0;\r\n}\r\n.pops button[data-has-icon="false"] .pops-bottom-icon {\r\n display: none;\r\n}\r\n.pops button {\r\n border-radius: var(--button-radius);\r\n box-shadow: none;\r\n font-weight: 400;\r\n font-size: var(--button-font-size);\r\n cursor: pointer;\r\n transition: all 0.3s ease-in-out;\r\n}\r\n.pops button {\r\n display: flex;\r\n align-items: center;\r\n height: var(--button-height);\r\n line-height: normal;\r\n box-sizing: border-box;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n border: 1px solid var(--button-bd-color);\r\n}\r\n.pops button {\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n}\r\n.pops button:active {\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n outline: 0;\r\n}\r\n.pops button:hover {\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n}\r\n.pops button:focus-visible {\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n}\r\n.pops button:disabled {\r\n cursor: not-allowed;\r\n color: var(--button-color);\r\n border-color: var(--button-bd-color);\r\n background-color: var(--button-bg-color);\r\n}\r\n.pops button.pops-button-large {\r\n --button-height: 32px;\r\n --button-padding-top: 12px;\r\n --button-padding-bottom: 12px;\r\n --button-padding-left: 19px;\r\n --button-padding-right: 19px;\r\n --button-font-size: 14px;\r\n --button-border-radius: 4px;\r\n}\r\n\r\n.pops button.pops-button-small {\r\n --button-height: 24px;\r\n --button-padding-top: 5px;\r\n --button-padding-bottom: 5px;\r\n --button-padding-left: 11px;\r\n --button-padding-right: 11px;\r\n --button-font-size: 12px;\r\n --button-border-radius: 4px;\r\n}\r\n.pops-panel-button-no-icon .pops-panel-button_inner i {\r\n display: none;\r\n}\r\n.pops-panel-button-right-icon {\r\n}\r\n.pops-panel-button-right-icon .pops-panel-button_inner {\r\n flex-direction: row-reverse;\r\n}\r\n.pops-panel-button-right-icon .pops-panel-button_inner i {\r\n}\r\n.pops-panel-button .pops-panel-button_inner i:has(svg),\r\n.pops-panel-button-right-icon .pops-panel-button-text {\r\n margin-right: 6px;\r\n}\r\n\r\n.pops button[type="default"] {\r\n --button-color: #333333;\r\n --button-bd-color: #dcdfe6;\r\n --button-bg-color: #ffffff;\r\n}\r\n.pops button[type="default"]:active {\r\n --button-color: #409eff;\r\n --button-bd-color: #409eff;\r\n --button-bg-color: #ecf5ff;\r\n}\r\n.pops button[type="default"]:hover {\r\n --button-color: #409eff;\r\n --button-bd-color: #c6e2ff;\r\n --button-bg-color: #ecf5ff;\r\n}\r\n.pops button[type="default"]:focus-visible {\r\n outline: 2px solid #a0cfff;\r\n outline-offset: 1px;\r\n}\r\n.pops button[type="default"]:disabled {\r\n --button-color: #a8abb2;\r\n --button-bd-color: #fff;\r\n --button-bg-color: #e4e7ed;\r\n}\r\n\r\n.pops button[type="primary"] {\r\n --button-color: #ffffff;\r\n --button-bd-color: #409eff;\r\n --button-bg-color: #409eff;\r\n}\r\n.pops button[type="primary"]:active {\r\n --button-color: #ffffff;\r\n --button-bd-color: #337ecc;\r\n --button-bg-color: #337ecc;\r\n}\r\n.pops button[type="primary"]:hover {\r\n --button-color: #ffffff;\r\n --button-bd-color: #79bbff;\r\n --button-bg-color: #79bbff;\r\n}\r\n.pops button[type="primary"]:focus-visible {\r\n outline: 2px solid #a0cfff;\r\n outline-offset: 1px;\r\n}\r\n.pops button[type="primary"]:disabled {\r\n --button-color: #ffffff;\r\n --button-bd-color: #a0cfff;\r\n --button-bg-color: #a0cfff;\r\n}\r\n\r\n.pops button[type="success"] {\r\n --button-color: #ffffff;\r\n --button-bd-color: #4cae4c;\r\n --button-bg-color: #5cb85c;\r\n}\r\n.pops button[type="success"]:active {\r\n --button-color: #ffffff;\r\n --button-bd-color: #529b2e;\r\n --button-bg-color: #529b2e;\r\n}\r\n.pops button[type="success"]:hover {\r\n --button-color: #ffffff;\r\n --button-bd-color: #95d475;\r\n --button-bg-color: #95d475;\r\n}\r\n.pops button[type="success"]:focus-visible {\r\n outline: 2px solid #b3e19d;\r\n outline-offset: 1px;\r\n}\r\n.pops button[type="success"]:disabled {\r\n --button-color: #ffffff;\r\n --button-bd-color: #b3e19d;\r\n --button-bg-color: #b3e19d;\r\n}\r\n\r\n.pops button[type="info"] {\r\n --button-color: #ffffff;\r\n --button-bd-color: #909399;\r\n --button-bg-color: #909399;\r\n}\r\n.pops button[type="info"]:active {\r\n --button-color: #ffffff;\r\n --button-bd-color: #73767a;\r\n --button-bg-color: #73767a;\r\n}\r\n.pops button[type="info"]:hover {\r\n --button-color: #ffffff;\r\n --button-bd-color: #b1b3b8;\r\n --button-bg-color: #b1b3b8;\r\n}\r\n.pops button[type="info"]:focus-visible {\r\n outline: 2px solid #c8c9cc;\r\n outline-offset: 1px;\r\n}\r\n.pops button[type="info"]:disabled {\r\n --button-color: #ffffff;\r\n --button-bd-color: #c8c9cc;\r\n --button-bg-color: #c8c9cc;\r\n}\r\n\r\n.pops button[type="warning"] {\r\n --button-color: #ffffff;\r\n --button-bd-color: #e6a23c;\r\n --button-bg-color: #e6a23c;\r\n}\r\n.pops button[type="warning"]:active {\r\n --button-color: #ffffff;\r\n --button-bd-color: #b88230;\r\n --button-bg-color: #b88230;\r\n}\r\n.pops button[type="warning"]:hover {\r\n --button-color: #ffffff;\r\n --button-bd-color: #eebe77;\r\n --button-bg-color: #eebe77;\r\n}\r\n.pops button[type="warning"]:focus-visible {\r\n outline: 2px solid #f3d19e;\r\n outline-offset: 1px;\r\n}\r\n.pops button[type="warning"]:disabled {\r\n --button-color: #ffffff;\r\n --button-bd-color: #f3d19e;\r\n --button-bg-color: #f3d19e;\r\n}\r\n\r\n.pops button[type="danger"] {\r\n --button-color: #ffffff;\r\n --button-bd-color: #f56c6c;\r\n --button-bg-color: #f56c6c;\r\n}\r\n.pops button[type="danger"]:active {\r\n --button-color: #ffffff;\r\n --button-bd-color: #c45656;\r\n --button-bg-color: #c45656;\r\n}\r\n.pops button[type="danger"]:hover {\r\n --button-color: #ffffff;\r\n --button-bd-color: #f89898;\r\n --button-bg-color: #f89898;\r\n}\r\n.pops button[type="danger"]:focus-visible {\r\n outline: 2px solid #fab6b6;\r\n outline-offset: 1px;\r\n}\r\n.pops button[type="danger"]:disabled {\r\n --button-color: #ffffff;\r\n --button-bd-color: #fab6b6;\r\n --button-bg-color: #fab6b6;\r\n}\r\n\r\n.pops button[type="xiaomi-primary"] {\r\n --button-color: #ffffff;\r\n --button-bd-color: #ff5c00;\r\n --button-bg-color: #ff5c00;\r\n}\r\n.pops button[type="xiaomi-primary"]:active {\r\n --button-color: #ffffff;\r\n --button-bd-color: #da4f00;\r\n --button-bg-color: #da4f00;\r\n}\r\n.pops button[type="xiaomi-primary"]:hover {\r\n --button-color: #ffffff;\r\n --button-bd-color: #ff7e29;\r\n --button-bg-color: #ff7e29;\r\n}\r\n.pops button[type="xiaomi-primary"]:focus-visible {\r\n outline: 2px solid #fab6b6;\r\n outline-offset: 1px;\r\n}\r\n.pops button[type="xiaomi-primary"]:disabled {\r\n --button-color: #ffffff;\r\n --button-bd-color: #fad5b6;\r\n --button-bg-color: #fad5b6;\r\n}\r\n';
var commonCSS = ".pops-flex-items-center {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-flex-y-center {\r\n display: flex;\r\n justify-content: space-between;\r\n}\r\n.pops-flex-x-center {\r\n display: flex;\r\n align-content: center;\r\n}\r\n.pops-hide {\r\n display: none;\r\n}\r\n.pops-hide-important {\r\n display: none !important;\r\n}\r\n.pops-no-border {\r\n border: 0;\r\n}\r\n.pops-no-border-important {\r\n border: 0 !important;\r\n}\r\n.pops-user-select-none {\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -ms-user-select: none;\r\n -moz-user-select: none;\r\n}\r\n.pops-line-height-center {\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n.pops-width-fill {\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n}\r\n";
var animCSS = '@keyframes rotating {\r\n 0% {\r\n transform: rotate(0);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n@keyframes iframeLoadingChange_85 {\r\n 0% {\r\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n }\r\n 20% {\r\n background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n }\r\n 40% {\r\n background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n }\r\n 60% {\r\n background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n }\r\n 80% {\r\n background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n }\r\n 100% {\r\n background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n }\r\n from {\r\n width: 75%;\r\n }\r\n to {\r\n width: 100%;\r\n }\r\n}\r\n@keyframes iframeLoadingChange {\r\n 0% {\r\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n }\r\n 20% {\r\n background: linear-gradient(to right, #4995dd, #ead0d0, rgb(123 185 246));\r\n }\r\n 40% {\r\n background: linear-gradient(to right, #4995dd, #f4b7b7, rgb(112 178 244));\r\n }\r\n 60% {\r\n background: linear-gradient(to right, #4995dd, #ec9393, rgb(80 163 246));\r\n }\r\n 80% {\r\n background: linear-gradient(to right, #4995dd, #e87f7f, rgb(25 139 253));\r\n }\r\n 100% {\r\n background: linear-gradient(to right, #4995dd, #ee2c2c, rgb(0 124 247));\r\n }\r\n from {\r\n width: 0;\r\n }\r\n to {\r\n width: 75%;\r\n }\r\n}\r\n\r\n@keyframes searchSelectFalIn {\r\n from {\r\n opacity: 0;\r\n display:none;\r\n }\r\n to {\r\n display:block;\r\n opacity: 1;\r\n }\r\n}\r\n@keyframes searchSelectFalOut {\r\n from {\r\n display:block;\r\n opacity: 1;\r\n }\r\n to {\r\n opacity: 0;\r\n display:none;\r\n }\r\n}\r\n\r\n@keyframes pops-anim-wait-rotate {\r\n form {\r\n transform: rotate(0);\r\n }\r\n to {\r\n transform: rotate(360deg);\r\n }\r\n}\r\n@keyframes pops-anim-spread {\r\n 0% {\r\n opacity: 0;\r\n transform: scaleX(0);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n}\r\n@keyframes pops-anim-shake {\r\n 0%,\r\n 100% {\r\n transform: translateX(0);\r\n }\r\n 10%,\r\n 30%,\r\n 50%,\r\n 70%,\r\n 90% {\r\n transform: translateX(-10px);\r\n }\r\n 20%,\r\n 40%,\r\n 60%,\r\n 80% {\r\n transform: translateX(10px);\r\n }\r\n}\r\n@keyframes pops-anim-rolling-left {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(-100%) rotate(-120deg);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0) rotate(0);\r\n }\r\n}\r\n@keyframes pops-anim-rolling-right {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(100%) rotate(120deg);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0) rotate(0);\r\n }\r\n}\r\n@keyframes pops-anim-slide-top {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-200%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n@keyframes pops-anim-slide-bottom {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(200%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n@keyframes pops-anim-slide-left {\r\n 0% {\r\n opacity: 0;\r\n transform: translateX(-200%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-anim-slide-right {\r\n 0% {\r\n transform: translateX(200%);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-anim-fadein {\r\n 0% {\r\n opacity: 0;\r\n }\r\n 100% {\r\n opacity: 1;\r\n }\r\n}\r\n@keyframes pops-anim-fadein-zoom {\r\n 0% {\r\n opacity: 0;\r\n transform: scale(0.5);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n}\r\n@keyframes pops-anim-fadein-alert {\r\n 0% {\r\n transform: scale(0.5);\r\n }\r\n 45% {\r\n transform: scale(1.05);\r\n }\r\n 80% {\r\n transform: scale(0.95);\r\n }\r\n 100% {\r\n transform: scale(1);\r\n }\r\n}\r\n@keyframes pops-anim-don {\r\n 0% {\r\n opacity: 0;\r\n transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 2.08333% {\r\n transform: matrix3d(\r\n 0.75266,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.76342,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 4.16667% {\r\n transform: matrix3d(\r\n 0.81071,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.84545,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 6.25% {\r\n transform: matrix3d(\r\n 0.86808,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.9286,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 8.33333% {\r\n transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 10.4167% {\r\n transform: matrix3d(\r\n 0.96482,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.05202,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 12.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 14.5833% {\r\n transform: matrix3d(\r\n 1.02563,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.09149,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 16.6667% {\r\n transform: matrix3d(\r\n 1.04227,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.08453,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 18.75% {\r\n transform: matrix3d(\r\n 1.05102,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.06666,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 20.8333% {\r\n transform: matrix3d(\r\n 1.05334,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.04355,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 22.9167% {\r\n transform: matrix3d(\r\n 1.05078,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.02012,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 25% {\r\n transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 27.0833% {\r\n transform: matrix3d(\r\n 1.03699,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.98534,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 29.1667% {\r\n transform: matrix3d(\r\n 1.02831,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.97688,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 31.25% {\r\n transform: matrix3d(\r\n 1.01973,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.97422,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 33.3333% {\r\n transform: matrix3d(\r\n 1.01191,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.97618,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 35.4167% {\r\n transform: matrix3d(\r\n 1.00526,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.98122,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 37.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 39.5833% {\r\n transform: matrix3d(\r\n 0.99617,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99433,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 41.6667% {\r\n transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 43.75% {\r\n transform: matrix3d(\r\n 0.99237,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00413,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 45.8333% {\r\n transform: matrix3d(\r\n 0.99202,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00651,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 47.9167% {\r\n transform: matrix3d(\r\n 0.99241,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00726,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 50% {\r\n opacity: 1;\r\n transform: matrix3d(\r\n 0.99329,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00671,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 52.0833% {\r\n transform: matrix3d(\r\n 0.99447,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00529,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 54.1667% {\r\n transform: matrix3d(\r\n 0.99577,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00346,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 56.25% {\r\n transform: matrix3d(\r\n 0.99705,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.0016,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 58.3333% {\r\n transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 60.4167% {\r\n transform: matrix3d(\r\n 0.99921,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99884,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 62.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 64.5833% {\r\n transform: matrix3d(\r\n 1.00057,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99795,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 66.6667% {\r\n transform: matrix3d(\r\n 1.00095,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99811,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 68.75% {\r\n transform: matrix3d(\r\n 1.00114,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99851,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 70.8333% {\r\n transform: matrix3d(\r\n 1.00119,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99903,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 72.9167% {\r\n transform: matrix3d(\r\n 1.00114,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99955,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 75% {\r\n transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 77.0833% {\r\n transform: matrix3d(\r\n 1.00083,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00033,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 79.1667% {\r\n transform: matrix3d(\r\n 1.00063,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00052,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 81.25% {\r\n transform: matrix3d(\r\n 1.00044,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00058,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 83.3333% {\r\n transform: matrix3d(\r\n 1.00027,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00053,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 85.4167% {\r\n transform: matrix3d(\r\n 1.00012,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00042,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 87.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 89.5833% {\r\n transform: matrix3d(\r\n 0.99991,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00013,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 91.6667% {\r\n transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 93.75% {\r\n transform: matrix3d(\r\n 0.99983,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99991,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 95.8333% {\r\n transform: matrix3d(\r\n 0.99982,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99985,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 97.9167% {\r\n transform: matrix3d(\r\n 0.99983,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99984,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n}\r\n@keyframes pops-anim-roll {\r\n 0% {\r\n transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n }\r\n 100% {\r\n transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n }\r\n}\r\n@keyframes pops-anim-sandra {\r\n 0% {\r\n opacity: 0;\r\n transform: scale3d(1.1, 1.1, 1);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scale3d(1, 1, 1);\r\n }\r\n}\r\n@keyframes pops-anim-gather {\r\n 0% {\r\n opacity: 0;\r\n transform: scale(5, 0);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: scale(1, 1);\r\n }\r\n}\r\n@keyframes pops-anim-spread-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: scaleX(1);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scaleX(0);\r\n }\r\n}\r\n@keyframes pops-anim-shake-reverse {\r\n 0%,\r\n 100% {\r\n transform: translateX(10px);\r\n }\r\n 10%,\r\n 30%,\r\n 50%,\r\n 70%,\r\n 90% {\r\n transform: translateX(-10px);\r\n }\r\n 20%,\r\n 40%,\r\n 60%,\r\n 80% {\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-anim-rolling-left-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateX(0) rotate(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateX(-100%) rotate(-120deg);\r\n }\r\n}\r\n@keyframes pops-anim-rolling-right-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateX(0) rotate(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateX(100%) rotate(120deg);\r\n }\r\n}\r\n@keyframes pops-anim-slide-top-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-200%);\r\n }\r\n}\r\n@keyframes pops-anim-slide-bottom-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(200%);\r\n }\r\n}\r\n@keyframes pops-anim-slide-left-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateX(-200%);\r\n }\r\n}\r\n@keyframes pops-anim-slide-right-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n transform: translateX(200%);\r\n }\r\n}\r\n@keyframes pops-anim-fadein-reverse {\r\n 0% {\r\n opacity: 1;\r\n }\r\n 100% {\r\n opacity: 0;\r\n }\r\n}\r\n@keyframes pops-anim-fadein-zoom-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: scale(1);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scale(0.5);\r\n }\r\n}\r\n@keyframes pops-anim-fadein-alert-reverse {\r\n 0% {\r\n transform: scale(1);\r\n }\r\n 45% {\r\n transform: scale(0.95);\r\n }\r\n 80% {\r\n transform: scale(1.05);\r\n }\r\n 100% {\r\n transform: scale(0.5);\r\n }\r\n}\r\n@keyframes pops-anim-don-reverse {\r\n 100% {\r\n opacity: 0;\r\n transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 97.9167% {\r\n transform: matrix3d(\r\n 0.75266,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.76342,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 95.8333% {\r\n transform: matrix3d(\r\n 0.81071,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.84545,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 93.75% {\r\n transform: matrix3d(\r\n 0.86808,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.9286,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 91.6667% {\r\n transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 89.5833% {\r\n transform: matrix3d(\r\n 0.96482,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.05202,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 87.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 85.4167% {\r\n transform: matrix3d(\r\n 1.02563,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.09149,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 83.3333% {\r\n transform: matrix3d(\r\n 1.04227,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.08453,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 81.25% {\r\n transform: matrix3d(\r\n 1.05102,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.06666,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 79.1667% {\r\n transform: matrix3d(\r\n 1.05334,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.04355,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 77.0833% {\r\n transform: matrix3d(\r\n 1.05078,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.02012,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 75% {\r\n transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 72.9167% {\r\n transform: matrix3d(\r\n 1.03699,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.98534,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 70.8333% {\r\n transform: matrix3d(\r\n 1.02831,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.97688,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 68.75% {\r\n transform: matrix3d(\r\n 1.01973,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.97422,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 66.6667% {\r\n transform: matrix3d(\r\n 1.01191,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.97618,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 64.5833% {\r\n transform: matrix3d(\r\n 1.00526,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.98122,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 62.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 60.4167% {\r\n transform: matrix3d(\r\n 0.99617,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99433,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 58.3333% {\r\n transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 56.25% {\r\n transform: matrix3d(\r\n 0.99237,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00413,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 54.1667% {\r\n transform: matrix3d(\r\n 0.99202,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00651,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 52.0833% {\r\n transform: matrix3d(\r\n 0.99241,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00726,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 50% {\r\n opacity: 1;\r\n transform: matrix3d(\r\n 0.99329,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00671,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 47.9167% {\r\n transform: matrix3d(\r\n 0.99447,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00529,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 45.8333% {\r\n transform: matrix3d(\r\n 0.99577,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00346,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 43.75% {\r\n transform: matrix3d(\r\n 0.99705,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.0016,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 41.6667% {\r\n transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 39.5833% {\r\n transform: matrix3d(\r\n 0.99921,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99884,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 37.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 35.4167% {\r\n transform: matrix3d(\r\n 1.00057,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99795,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 33.3333% {\r\n transform: matrix3d(\r\n 1.00095,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99811,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 31.25% {\r\n transform: matrix3d(\r\n 1.00114,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99851,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 29.1667% {\r\n transform: matrix3d(\r\n 1.00119,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99903,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 27.0833% {\r\n transform: matrix3d(\r\n 1.00114,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99955,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 25% {\r\n transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 22.9167% {\r\n transform: matrix3d(\r\n 1.00083,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00033,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 20.8333% {\r\n transform: matrix3d(\r\n 1.00063,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00052,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 18.75% {\r\n transform: matrix3d(\r\n 1.00044,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00058,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 16.6667% {\r\n transform: matrix3d(\r\n 1.00027,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00053,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 14.5833% {\r\n transform: matrix3d(\r\n 1.00012,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00042,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 12.5% {\r\n transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 10.4167% {\r\n transform: matrix3d(\r\n 0.99991,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1.00013,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 8.33333% {\r\n transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);\r\n }\r\n 6.25% {\r\n transform: matrix3d(\r\n 0.99983,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99991,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 4.16667% {\r\n transform: matrix3d(\r\n 0.99982,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99985,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 2.08333% {\r\n transform: matrix3d(\r\n 0.99983,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 0.99984,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1\r\n );\r\n }\r\n 0% {\r\n opacity: 1;\r\n transform: matrix3d(\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0,\r\n 1,\r\n 0,\r\n 0,\r\n 0,\r\n 0type=close,\r\n 1\r\n );\r\n }\r\n}\r\n@keyframes pops-anim-roll-reverse {\r\n 0% {\r\n transform: perspective(1000px) rotate3d(1, 0, 0, 0deg);\r\n }\r\n 100% {\r\n transform: perspective(1000px) rotate3d(1, 0, 0, 90deg);\r\n }\r\n}\r\n@keyframes pops-anim-sandra-reverse {\r\n 0% {\r\n opacity: 1;\r\n transform: scale3d(1, 1, 1);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scale3d(1.1, 1.1, 1);\r\n }\r\n}\r\n@keyframes pops-anim-gather-reverse {\r\n 0% {\r\n opacity: 0;\r\n transform: scale(5, 0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: scale(5, 0);\r\n }\r\n}\r\n\r\n@-webkit-keyframes pops-motion-fadeInTop {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateY(-30px);\r\n transform: translateY(-30px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-motion-fadeInTop {\r\n 0% {\r\n opacity: 0;\r\n transform: translateY(-30px);\r\n -ms-transform: translateY(-30px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutTop {\r\n 0% {\r\n opacity: 10;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateY(-30px);\r\n transform: translateY(-30px);\r\n }\r\n}\r\n@keyframes pops-motion-fadeOutTop {\r\n 0% {\r\n opacity: 1;\r\n transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n transform: translateY(-30px);\r\n -ms-transform: translateY(-30px);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInBottom {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateY(20px);\r\n transform: translateY(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n }\r\n}\r\n@keyframes pops-motion-fadeInBottom {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateY(20px);\r\n transform: translateY(20px);\r\n -ms-transform: translateY(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutBottom {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateY(20px);\r\n transform: translateY(20px);\r\n }\r\n}\r\n@keyframes pops-motion-fadeOutBottom {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateY(0);\r\n transform: translateY(0);\r\n -ms-transform: translateY(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateY(20px);\r\n transform: translateY(20px);\r\n -ms-transform: translateY(20px);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInLeft {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateX(-20px);\r\n transform: translateX(-20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-motion-fadeInLeft {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateX(-30px);\r\n transform: translateX(-30px);\r\n -ms-transform: translateX(-30px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutLeft {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateX(-30px);\r\n transform: translateX(-30px);\r\n }\r\n}\r\n@keyframes pops-motion-fadeOutLeft {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateX(-20px);\r\n transform: translateX(-20px);\r\n -ms-transform: translateX(-20px);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeInRight {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateX(20px);\r\n transform: translateX(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n}\r\n@keyframes pops-motion-fadeInRight {\r\n 0% {\r\n opacity: 0;\r\n -webkit-transform: translateX(20px);\r\n transform: translateX(20px);\r\n -ms-transform: translateX(20px);\r\n }\r\n 100% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n}\r\n@-webkit-keyframes pops-motion-fadeOutRight {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateX(20px);\r\n transform: translateX(20px);\r\n }\r\n}\r\n@keyframes pops-motion-fadeOutRight {\r\n 0% {\r\n opacity: 1;\r\n -webkit-transform: translateX(0);\r\n transform: translateX(0);\r\n -ms-transform: translateX(0);\r\n }\r\n 100% {\r\n opacity: 0;\r\n -webkit-transform: translateX(20px);\r\n transform: translateX(20px);\r\n -ms-transform: translateX(20px);\r\n }\r\n}\r\n\r\n/* 动画 */\r\n.pops-anim[anim="pops-anim-spread"] {\r\n animation: pops-anim-spread 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-shake"] {\r\n animation: pops-anim-shake 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-rolling-left"] {\r\n animation: pops-anim-rolling-left 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-rolling-right"] {\r\n animation: pops-anim-rolling-right 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-slide-top"] {\r\n animation: pops-anim-slide-top 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-slide-bottom"] {\r\n animation: pops-anim-slide-bottom 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-slide-left"] {\r\n animation: pops-anim-slide-left 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-slide-right"] {\r\n animation: pops-anim-slide-right 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-fadein"] {\r\n animation: pops-anim-fadein 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-fadein-zoom"] {\r\n animation: pops-anim-fadein-zoom 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-fadein-alert"] {\r\n animation: pops-anim-fadein-alert 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-don"] {\r\n animation: pops-anim-don 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-roll"] {\r\n animation: pops-anim-roll 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-sandra"] {\r\n animation: pops-anim-sandra 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-gather"] {\r\n animation: pops-anim-gather 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-spread-reverse"] {\r\n animation: pops-anim-spread-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-shake-reverse"] {\r\n animation: pops-anim-shake-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-rolling-left-reverse"] {\r\n animation: pops-anim-rolling-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-rolling-right-reverse"] {\r\n animation: pops-anim-rolling-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-slide-top-reverse"] {\r\n animation: pops-anim-slide-top-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-slide-bottom-reverse"] {\r\n animation: pops-anim-slide-bottom-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-slide-left-reverse"] {\r\n animation: pops-anim-slide-left-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-slide-right-reverse"] {\r\n animation: pops-anim-slide-right-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-fadein-reverse"] {\r\n animation: pops-anim-fadein-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-fadein-zoom-reverse"] {\r\n animation: pops-anim-fadein-zoom-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-fadein-alert-reverse"] {\r\n animation: pops-anim-fadein-alert-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-don-reverse"] {\r\n animation: pops-anim-don-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-roll-reverse"] {\r\n animation: pops-anim-roll-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-sandra-reverse"] {\r\n animation: pops-anim-sandra-reverse 0.3s;\r\n}\r\n.pops-anim[anim="pops-anim-gather-reverse"] {\r\n animation: pops-anim-gather-reverse 0.3s;\r\n}\r\n';
var alertCSS = '.pops[type-value] .pops-alert-title {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n.pops[type-value="alert"] .pops-alert-title {\r\n width: 100%;\r\n height: var(--container-title-height);\r\n border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value="alert"] .pops-alert-title p[pops] {\r\n width: 100%;\r\n overflow: hidden;\r\n color: rgb(51, 51, 51);\r\n text-indent: 15px;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n line-height: normal;\r\n}\r\n.pops[type-value="alert"] .pops-alert-content {\r\n width: 100%;\r\n /*height: calc(\r\n 100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n );*/\r\n flex: 1;\r\n overflow: auto;\r\n word-break: break-word;\r\n}\r\n.pops[type-value="alert"] .pops-alert-content p[pops] {\r\n padding: 5px 10px;\r\n color: rgb(51, 51, 51);\r\n text-indent: 15px;\r\n}\r\n.pops[type-value="alert"] .pops-alert-btn {\r\n /*position: absolute;\r\n bottom: 0;*/\r\n display: flex;\r\n padding: 10px 10px 10px 10px;\r\n width: 100%;\r\n height: var(--container-bottom-btn-height);\r\n max-height: var(--container-bottom-btn-height);\r\n line-height: normal;\r\n border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n text-align: right;\r\n align-items: center;\r\n}\r\n';
var confirmCSS = '.pops[type-value] .pops-confirm-title {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n.pops[type-value="confirm"] .pops-confirm-title {\r\n width: 100%;\r\n height: var(--container-title-height);\r\n border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value="confirm"] .pops-confirm-title p[pops] {\r\n width: 100%;\r\n overflow: hidden;\r\n color: rgb(51, 51, 51);\r\n text-indent: 15px;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n line-height: normal;\r\n}\r\n.pops[type-value="confirm"] .pops-confirm-content {\r\n width: 100%;\r\n /*height: calc(\r\n 100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n );*/\r\n flex: 1;\r\n overflow: auto;\r\n word-break: break-word;\r\n}\r\n.pops[type-value="confirm"] .pops-confirm-content p[pops] {\r\n padding: 5px 10px;\r\n color: rgb(51, 51, 51);\r\n text-indent: 15px;\r\n}\r\n.pops[type-value="confirm"] .pops-confirm-btn {\r\n /*position: absolute;\r\n bottom: 0;*/\r\n display: flex;\r\n padding: 10px 10px 10px 10px;\r\n width: 100%;\r\n height: var(--container-bottom-btn-height);\r\n max-height: var(--container-bottom-btn-height);\r\n line-height: normal;\r\n border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n text-align: right;\r\n align-items: center;\r\n}\r\n';
var promptCSS = '.pops[type-value] .pops-prompt-title {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n.pops[type-value="prompt"] .pops-prompt-title {\r\n width: 100%;\r\n height: var(--container-title-height);\r\n border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value="prompt"] .pops-prompt-title p[pops] {\r\n width: 100%;\r\n overflow: hidden;\r\n color: rgb(51, 51, 51);\r\n text-indent: 15px;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n.pops[type-value="prompt"] .pops-prompt-content {\r\n width: 100%;\r\n /*height: calc(\r\n 100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n );*/\r\n flex: 1;\r\n overflow: auto;\r\n word-break: break-word;\r\n}\r\n.pops[type-value="prompt"] .pops-prompt-content p[pops] {\r\n padding: 5px 10px;\r\n color: rgb(51, 51, 51);\r\n text-indent: 15px;\r\n}\r\n.pops[type-value="prompt"] .pops-prompt-btn {\r\n display: flex;\r\n padding: 10px 10px 10px 10px;\r\n width: 100%;\r\n height: var(--container-bottom-btn-height);\r\n max-height: var(--container-bottom-btn-height);\r\n line-height: normal;\r\n align-content: center;\r\n border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n text-align: right;\r\n align-items: center;\r\n}\r\n.pops[type-value="prompt"] input[pops] {\r\n padding: 5px 10px;\r\n}\r\n.pops[type-value="prompt"] textarea[pops] {\r\n padding: 5px 10px;\r\n resize: none;\r\n}\r\n.pops[type-value="prompt"] input[pops],\r\n.pops[type-value="prompt"] textarea[pops] {\r\n width: 100%;\r\n height: 100%;\r\n outline: 0;\r\n border: 0;\r\n color: rgb(51, 51, 51);\r\n}\r\n';
var loadingCSS = '.pops[type-value="loading"] {\r\n position: absolute;\r\n top: 272.5px;\r\n top: 50%;\r\n left: 26px;\r\n left: 50%;\r\n display: flex;\r\n overflow: hidden;\r\n padding: 10px 15px;\r\n max-width: 100%;\r\n max-height: 100%;\r\n min-width: 0;\r\n min-height: 0;\r\n border: 1px solid rgba(0, 0, 0, 0.2);\r\n border-radius: 5px;\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow: 0 0 5px rgb(0 0 0 / 50%);\r\n vertical-align: middle;\r\n transition: all 0.35s;\r\n transform: translate(-50%, -50%);\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n align-content: center;\r\n}\r\n.pops[type-value="loading"]:before {\r\n float: left;\r\n display: inline-block;\r\n width: 2em;\r\n height: 2em;\r\n border: 0.3em solid rgba(100, 149, 237, 0.1);\r\n border-top: 0.3em solid rgb(100, 149, 237, var(--pops-bd-opacity));\r\n border-radius: 50%;\r\n content: " ";\r\n vertical-align: middle;\r\n font-size: inherit;\r\n animation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value="loading"] .pops-loading-content {\r\n position: static;\r\n top: 0;\r\n bottom: 0;\r\n float: left;\r\n overflow: hidden;\r\n width: auto;\r\n font-size: inherit;\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n.pops[type-value="loading"] .pops-loading-content p[pops] {\r\n display: inline-block;\r\n padding: 5px 0px;\r\n color: rgb(51, 51, 51);\r\n text-indent: 15px;\r\n font-size: inherit;\r\n text-align: center;\r\n}\r\n';
var iframeCSS = '.pops[type-value="iframe"] {\r\n --container-title-height: 55px;\r\n transition: width 0.35s ease, height 0.35s ease;\r\n}\r\n.pops[type-value] .pops-iframe-title {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n.pops[type-value="iframe"] .pops-iframe-title {\r\n width: calc(100% - 0px);\r\n height: var(--container-title-height);\r\n border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value="iframe"] .pops-iframe-title p[pops] {\r\n width: 100%;\r\n overflow: hidden;\r\n color: rgb(51, 51, 51);\r\n text-indent: 15px;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n.pops[type-value="iframe"] .pops-iframe-content {\r\n width: 100%;\r\n /*height: calc(100% - var(--container-title-height));*/\r\n flex: 1;\r\n overflow: hidden;\r\n word-break: break-word;\r\n}\r\n.pops[type-value="iframe"] .pops-iframe-content p[pops] {\r\n padding: 5px 10px;\r\n color: #333;\r\n text-indent: 15px;\r\n}\r\n.pops-loading {\r\n position: absolute;\r\n top: 40px;\r\n right: 0;\r\n bottom: 0;\r\n left: 0;\r\n z-index: 5;\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-loading:before {\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n z-index: 3;\r\n display: block;\r\n margin: -20px 0 0 -20px;\r\n padding: 20px;\r\n border: 4px solid rgb(221, 221, 221, var(--pops-bd-opacity));\r\n border-radius: 50%;\r\n content: "";\r\n border-top-color: transparent;\r\n animation: pops-anim-wait-rotate 1.2s linear infinite;\r\n}\r\n.pops[type-value="iframe"].pops[type-module="min"] {\r\n bottom: 0;\r\n max-width: 200px;\r\n max-height: 53px;\r\n position: unset;\r\n}\r\n.pops[type-value="iframe"].pops[type-module="min"]\r\n .pops-header-control[type="min"] {\r\n display: none;\r\n}\r\n.pops[type-value="iframe"].pops-iframe-unset-top {\r\n top: unset !important;\r\n}\r\n.pops[type-value="iframe"].pops-iframe-unset-left {\r\n left: unset !important;\r\n}\r\n.pops[type-value="iframe"].pops-iframe-unset-transform {\r\n transform: none !important;\r\n}\r\n.pops[type-value="iframe"].pops-iframe-unset-transition {\r\n transition: none !important;\r\n}\r\n.pops[type-value="iframe"].pops[type-module="max"] {\r\n width: 100% !important;\r\n height: 100% !important;\r\n}\r\n.pops[type-value="iframe"] iframe[pops] {\r\n width: calc(100% - 4px);\r\n height: calc(100% - 4px);\r\n border: 0;\r\n}\r\n.pops-iframe-content-global-loading {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n z-index: 999999;\r\n width: 0;\r\n height: 4px;\r\n background: linear-gradient(to right, #4995dd, #fff, rgb(202 224 246));\r\n animation: iframeLoadingChange 2s forwards;\r\n}\r\n\r\n.pops-anim:has(.pops[type-value="iframe"].pops[type-module="min"]) {\r\n position: unset;\r\n}\r\n';
var tooltipCSS = '.pops-tip {\r\n --tooltip-color: #4e4e4e;\r\n --tooltip-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --tooltip-bd-radius: 2px;\r\n --tooltip-font-size: 14px;\r\n --tooltip-padding-top: 13px;\r\n --tooltip-padding-right: 13px;\r\n --tooltip-padding-bottom: 13px;\r\n --tooltip-padding-left: 13px;\r\n\r\n --tooltip-arrow--after-color: rgb(78, 78, 78);\r\n --tooltip-arrow--after-bg-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n --tooltip-arrow--after-width: 12px;\r\n --tooltip-arrow--after-height: 12px;\r\n\r\n padding: var(--tooltip-padding-top) var(--tooltip-padding-right)\r\n var(--tooltip-padding-bottom) var(--tooltip-padding-left);\r\n max-width: 400px;\r\n max-height: 300px;\r\n border-radius: var(--tooltip-bd-radius);\r\n background-color: var(--tooltip-bg-color);\r\n box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);\r\n color: var(--tooltip-color);\r\n font-size: var(--tooltip-font-size);\r\n}\r\n.pops-tip[data-position="absolute"] {\r\n position: absolute;\r\n}\r\n.pops-tip[data-position="fixed"] {\r\n position: fixed;\r\n}\r\n/* github的样式 */\r\n.pops-tip.github-tooltip {\r\n --tooltip-bg-opacity: 1;\r\n --tooltip-color: rgb(255, 255, 255);\r\n --tooltip-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n --tooltip-bd-radius: 6px;\r\n --tooltip-padding-top: 6px;\r\n --tooltip-padding-right: 8px;\r\n --tooltip-padding-bottom: 6px;\r\n --tooltip-padding-left: 8px;\r\n\r\n --tooltip-arrow--after-color: rgb(255, 255, 255);\r\n --tooltip-arrow--after-bg-color: rgb(36, 41, 47, var(--tooltip-bg-opacity));\r\n --tooltip-arrow--after-width: 8px;\r\n --tooltip-arrow--after-height: 8px;\r\n}\r\n.pops-tip .pops-tip-arrow {\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 12.5px;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow::after {\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n width: var(--tooltip-arrow--after-width);\r\n height: var(--tooltip-arrow--after-height);\r\n background: var(--tooltip-arrow--after-bg-color);\r\n color: var(--tooltip-arrow--after-color);\r\n box-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n content: "";\r\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position="bottom"] {\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n overflow: hidden;\r\n width: 100%;\r\n height: 12.5px;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position="bottom"]:after {\r\n position: absolute;\r\n top: 0;\r\n left: 50%;\r\n width: var(--tooltip-arrow--after-width);\r\n height: var(--tooltip-arrow--after-height);\r\n background: var(--tooltip-arrow--after-bg-color);\r\n box-shadow: 0 1px 7px rgba(0, 0, 0, 0.24), 0 1px 7px rgba(0, 0, 0, 0.12);\r\n content: "";\r\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position="left"] {\r\n top: 50%;\r\n left: -12.5px;\r\n width: 12.5px;\r\n height: 50px;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position="left"]:after {\r\n position: absolute;\r\n top: 50%;\r\n left: 100%;\r\n content: "";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position="right"] {\r\n top: 50%;\r\n right: -12.5px;\r\n left: auto;\r\n width: 12.5px;\r\n height: 50px;\r\n transform: translateY(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position="right"]:after {\r\n position: absolute;\r\n top: 50%;\r\n left: 0;\r\n content: "";\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position="top"] {\r\n top: -12.5px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n}\r\n\r\n.pops-tip .pops-tip-arrow[data-position="top"]:after {\r\n position: absolute;\r\n top: 100%;\r\n left: 50%;\r\n content: "";\r\n}\r\n\r\n.pops-tip[data-motion] {\r\n -webkit-animation-duration: 0.25s;\r\n animation-duration: 0.25s;\r\n -webkit-animation-fill-mode: forwards;\r\n animation-fill-mode: forwards;\r\n}\r\n.pops-tip[data-motion="fadeOutRight"] {\r\n -webkit-animation-name: pops-motion-fadeOutRight;\r\n animation-name: pops-motion-fadeOutRight;\r\n}\r\n.pops-tip[data-motion="fadeInTop"] {\r\n -webkit-animation-name: pops-motion-fadeInTop;\r\n animation-name: pops-motion-fadeInTop;\r\n animation-timing-function: cubic-bezier(0.49, 0.49, 0.13, 1.3);\r\n}\r\n.pops-tip[data-motion="fadeOutTop"] {\r\n -webkit-animation-name: pops-motion-fadeOutTop;\r\n animation-name: pops-motion-fadeOutTop;\r\n animation-timing-function: cubic-bezier(0.32, 0.37, 0.06, 0.87);\r\n}\r\n.pops-tip[data-motion="fadeInBottom"] {\r\n -webkit-animation-name: pops-motion-fadeInBottom;\r\n animation-name: pops-motion-fadeInBottom;\r\n}\r\n.pops-tip[data-motion="fadeOutBottom"] {\r\n -webkit-animation-name: pops-motion-fadeOutBottom;\r\n animation-name: pops-motion-fadeOutBottom;\r\n}\r\n.pops-tip[data-motion="fadeInLeft"] {\r\n -webkit-animation-name: pops-motion-fadeInLeft;\r\n animation-name: pops-motion-fadeInLeft;\r\n}\r\n.pops-tip[data-motion="fadeOutLeft"] {\r\n -webkit-animation-name: pops-motion-fadeOutLeft;\r\n animation-name: pops-motion-fadeOutLeft;\r\n}\r\n.pops-tip[data-motion="fadeInRight"] {\r\n -webkit-animation-name: pops-motion-fadeInRight;\r\n animation-name: pops-motion-fadeInRight;\r\n}\r\n';
var drawerCSS = '.pops[type-value="drawer"] {\r\n position: fixed;\r\n box-sizing: border-box;\r\n display: flex;\r\n flex-direction: column;\r\n box-shadow: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),\r\n 0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);\r\n overflow: hidden;\r\n transition: all 0.3s;\r\n}\r\n.pops[type-value] .pops-drawer-title {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n.pops[type-value] .pops-drawer-title p[pops] {\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n\r\n.pops-drawer-content {\r\n flex: 1;\r\n overflow: auto;\r\n}\r\n.pops[type-value="drawer"] .pops-drawer-btn {\r\n padding-top: 10px;\r\n padding-bottom: 10px;\r\n}\r\n.pops[type-value="drawer"][direction="top"] {\r\n width: 100%;\r\n left: 0;\r\n right: 0;\r\n top: 0;\r\n}\r\n.pops[type-value="drawer"][direction="bottom"] {\r\n width: 100%;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n}\r\n.pops[type-value="drawer"][direction="left"] {\r\n height: 100%;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n}\r\n.pops[type-value="drawer"][direction="right"] {\r\n height: 100%;\r\n top: 0;\r\n bottom: 0;\r\n right: 0;\r\n}\r\n';
var folderCSS = '.pops[type-value] .pops-folder-title {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n}\r\n.pops[type-value="folder"] .pops-folder-title {\r\n width: 100%;\r\n height: var(--container-title-height);\r\n border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value="folder"] .pops-folder-title p[pops] {\r\n width: 100%;\r\n overflow: hidden;\r\n color: rgb(51, 51, 51);\r\n text-indent: 15px;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n line-height: normal;\r\n}\r\n.pops[type-value="folder"] .pops-folder-content p[pops] {\r\n padding: 5px 10px;\r\n color: rgb(51, 51, 51);\r\n text-indent: 15px;\r\n}\r\n.pops[type-value="folder"] .pops-folder-content {\r\n width: 100%;\r\n /*height: calc(\r\n 100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n );*/\r\n flex: 1;\r\n overflow: auto;\r\n word-break: break-word;\r\n}\r\n.pops[type-value="folder"] .pops-folder-btn {\r\n /*position: absolute;\r\n bottom: 0;*/\r\n display: flex;\r\n padding: 10px 10px 10px 10px;\r\n width: 100%;\r\n height: var(--container-bottom-btn-height);\r\n max-height: var(--container-bottom-btn-height);\r\n line-height: normal;\r\n border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n text-align: right;\r\n align-items: center;\r\n}\r\n.pops-folder-list .cursor-p {\r\n cursor: pointer;\r\n}\r\n.pops-folder-list a {\r\n background: 0 0;\r\n text-decoration: none;\r\n -webkit-tap-highlight-color: transparent;\r\n color: #05082c;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n width: 100%;\r\n table-layout: fixed;\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n padding: 0 20px;\r\n}\r\ntable.pops-folder-list-table__body,\r\ntable.pops-folder-list-table__header {\r\n height: 100%;\r\n background: 0 0;\r\n overflow: hidden;\r\n display: -webkit-box;\r\n display: -ms-flexbox;\r\n -ms-flex-direction: column;\r\n -webkit-box-orient: vertical;\r\n -webkit-box-direction: normal;\r\n}\r\ntable.pops-folder-list-table__body {\r\n height: 100%;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-folder-list table tr {\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n.pops-folder-list-table__header-row {\r\n height: 50px;\r\n line-height: normal;\r\n align-content: center;\r\n color: rgb(129, 137, 153);\r\n text-align: left;\r\n font-size: 12px;\r\n}\r\n.pops-folder-list-table__header-row {\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-folder-list-table__body-row {\r\n height: 50px;\r\n line-height: normal;\r\n align-content: center;\r\n color: #03081a;\r\n font-size: 12px;\r\n}\r\n.pops-folder-list-table__body-row:hover {\r\n background: rgb(245, 246, 247, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table th {\r\n border: 0;\r\n border-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\r\n}\r\n.pops-folder-list table td {\r\n border: 0;\r\n border-bottom: 1px solid rgb(247, 248, 250, var(--pops-bg-opacity));\r\n position: relative;\r\n}\r\n.pops-folder-list .list-name-text {\r\n display: inline-block;\r\n padding-left: 12px;\r\n line-height: normal;\r\n align-content: center;\r\n max-width: 176px;\r\n}\r\n.pops-folder-list-file-name > div {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.pops-mobile-folder-list-file-name {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-mobile-folder-list-file-name > div {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n padding: 6px 0px;\r\n flex-direction: column;\r\n}\r\n.pops-mobile-folder-list-file-name img.pops-folder-list-file-icon {\r\n width: 45px;\r\n height: 45px;\r\n}\r\n.pops-mobile-folder-list-file-name a.pops-folder-list-file-name-title-text {\r\n padding-left: unset;\r\n max-width: 250px;\r\n overflow-x: hidden;\r\n font-weight: 400;\r\n line-height: unset;\r\n margin-bottom: 4px;\r\n white-space: normal;\r\n text-overflow: unset;\r\n}\r\n\r\n/* 修改滚动 */\r\n.pops-folder-content {\r\n overflow: hidden !important;\r\n}\r\n.pops-folder-content .pops-folder-list {\r\n height: 100%;\r\n}\r\n.pops-folder-content .pops-folder-list-table__body-div {\r\n height: 100%;\r\n padding-bottom: 85px;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__body-div {\r\n height: 100%;\r\n padding-bottom: 40px;\r\n}\r\n.pops-folder-content table.pops-folder-list-table__body {\r\n overflow: auto;\r\n}\r\n.pops-mobile-folder-content .pops-folder-list-table__header-div {\r\n display: none;\r\n}\r\n\r\n.pops-folder-list-file-name-title-text:hover {\r\n text-decoration: none;\r\n color: rgb(6, 167, 255);\r\n}\r\n.pops-folder-list .text-ellip {\r\n overflow: hidden;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n}\r\n.pops-folder-list .content {\r\n color: rgb(129, 137, 153);\r\n position: relative;\r\n width: 100%;\r\n text-align: left;\r\n}\r\n.pops-folder-list .inline-block-v-middle {\r\n display: inline-block;\r\n vertical-align: middle;\r\n}\r\n.pops-folder-list .flex-a-i-center {\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-folder-list .u-file-icon {\r\n display: inline-block;\r\n vertical-align: middle;\r\n}\r\n.pops-folder-list .u-file-icon--list {\r\n width: 32px;\r\n height: 32px;\r\n}\r\n.pops-folder-list .pops-folder-list-file-icon {\r\n line-height: normal;\r\n align-content: center;\r\n position: relative;\r\n vertical-align: middle;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-primary {\r\n display: -webkit-box;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-align: center;\r\n -webkit-align-items: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n -webkit-box-orient: horizontal;\r\n -webkit-box-direction: normal;\r\n -webkit-flex-direction: row;\r\n -ms-flex-direction: row;\r\n flex-direction: row;\r\n min-height: 17px;\r\n flex-wrap: wrap;\r\n}\r\n.pops-folder-list .pops-folder-list-table__sort {\r\n display: inline-flex;\r\n margin-left: 4px;\r\n flex-direction: column;\r\n}\r\n\r\n.pops-folder-list .pops-folder-icon-arrow {\r\n width: 10px;\r\n height: 10px;\r\n fill: rgb(212, 215, 222);\r\n}\r\n.pops-folder-list .pops-folder-icon-active {\r\n fill: rgb(6, 167, 255);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb {\r\n padding: 4px 20px;\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n display: -webkit-box;\r\n display: -webkit-flex;\r\n display: -ms-flexbox;\r\n display: flex;\r\n -webkit-box-align: center;\r\n -webkit-align-items: center;\r\n -ms-flex-align: center;\r\n align-items: center;\r\n -webkit-box-orient: horizontal;\r\n -webkit-box-direction: normal;\r\n -webkit-flex-direction: row;\r\n -ms-flex-direction: row;\r\n flex-direction: row;\r\n -webkit-box-pack: start;\r\n -webkit-justify-content: start;\r\n -ms-flex-pack: start;\r\n justify-content: flex-start;\r\n min-height: 35px;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles {\r\n font-size: 12px;\r\n color: #333;\r\n line-height: normal;\r\n align-content: center;\r\n font-weight: 700;\r\n display: inline-block;\r\n max-width: 140px;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n word-wrap: normal;\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:last-child a {\r\n color: rgb(153, 153, 153);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb-allFiles:first-child a {\r\n font-size: 14px;\r\n color: rgb(18, 22, 26);\r\n}\r\n.pops-folder-list .pops-folder-file-list-breadcrumb .iconArrow {\r\n width: 16px;\r\n height: 16px;\r\n}\r\n.pops-folder-list .iconArrow {\r\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAASCAMAAABYd88+AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTOLi4uLi4t7e3uPj49/f397e3t3d3f///97e3vDw8N3d3d7e3t3d3d3d3ejo6N/f397e3t7e3t3d3d/f393d3d3d3RK+NoEAAAAWdFJOUwAnM4YPU/iQA+UIeMDaHhY41i7zX7UebpjFAAAAUElEQVQI15XOORaAIAwE0LATXHCd+x9VfCiksXCq+UUWou8oZ1vXHrt7YVBiYkW4gdMKYFIC4CSATWCNHWPuM6HuHkr1x3N0ZrBu/9gl0b9c3+kF7C7hS1YAAAAASUVORK5CYII=)\r\n 55% 50%/6px 9px no-repeat;\r\n}\r\n';
var panelCSS = '.pops[type-value="panel"] {\r\n --el-disabled-text-color: #a8abb2;\r\n --el-disabled-bg-color: #f5f7fa;\r\n --el-disabled-border-color: #e4e7ed;\r\n --pops-bg-color: #f2f2f2;\r\n --pops-color: #333;\r\n --title-bg-color: #ffffff;\r\n --aside-bg-color: #ffffff;\r\n --aside-hover-color: rgb(64, 158, 255);\r\n --aside-hover-bg-color: rgba(64, 158, 255, 0.1);\r\n\r\n --pops-panel-forms-margin-top-bottom: 10px;\r\n --pops-panel-forms-margin-left-right: 20px;\r\n --pops-panel-forms-header-icon-size: 20px;\r\n --pops-panel-forms-header-padding-top-bottom: 15px;\r\n --pops-panel-forms-header-padding-left-right: 10px;\r\n --pops-panel-forms-container-item-bg-color: #ffffff;\r\n --pops-panel-forms-container-item-title-color: #333;\r\n --pops-panel-forms-container-item-border-radius: 6px;\r\n --pops-panel-forms-container-item-margin-top-bottom: 10px;\r\n --pops-panel-forms-container-item-margin-left-right: var(\r\n --pops-panel-forms-margin-left-right\r\n );\r\n --pops-panel-forms-container-li-padding-top-bottom: 12px;\r\n --pops-panel-forms-container-li-padding-left-right: 16px;\r\n}\r\n.pops[type-value="panel"] {\r\n color: var(--pops-color);\r\n background: var(--pops-bg-color);\r\n}\r\n.pops[type-value] .pops-panel-title {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n background: var(--title-bg-color);\r\n}\r\n\r\n.pops[type-value="panel"] .pops-panel-title {\r\n width: 100%;\r\n height: var(--container-title-height);\r\n border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n}\r\n.pops[type-value="panel"] .pops-panel-title p[pops] {\r\n width: 100%;\r\n overflow: hidden;\r\n text-indent: 15px;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n font-weight: 500;\r\n line-height: normal;\r\n align-content: center;\r\n}\r\n.pops[type-value="panel"] .pops-panel-content {\r\n width: 100%;\r\n /*height: calc(\r\n 100% - var(--container-title-height) - var(--container-bottom-btn-height)\r\n );*/\r\n flex: 1;\r\n overflow: auto;\r\n word-break: break-word;\r\n}\r\n.pops[type-value="panel"] .pops-panel-btn {\r\n display: flex;\r\n padding: 10px 10px 10px 10px;\r\n width: 100%;\r\n height: var(--container-bottom-btn-height);\r\n max-height: var(--container-bottom-btn-height);\r\n line-height: normal;\r\n border-top: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n text-align: right;\r\n align-content: center;\r\n align-items: center;\r\n}\r\n\r\n/* ↓panel的CSS↓ */\r\naside.pops-panel-aside {\r\n overflow: auto;\r\n box-sizing: border-box;\r\n flex-shrink: 0;\r\n max-width: 200px;\r\n min-width: 100px;\r\n height: 100%;\r\n background: var(--aside-bg-color);\r\n border-right: 1px solid var(--aside-bg-color);\r\n font-size: 0.9em;\r\n}\r\naside.pops-panel-aside {\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n}\r\n.pops-panel-content {\r\n display: flex;\r\n flex-direction: row;\r\n flex: 1;\r\n overflow: auto;\r\n flex-basis: auto;\r\n box-sizing: border-box;\r\n min-width: 0;\r\n bottom: 0 !important;\r\n}\r\nsection.pops-panel-container {\r\n width: 100%;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul,\r\nsection.pops-panel-container .pops-panel-deepMenu-container-header-ul {\r\n border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n flex: 0 auto;\r\n}\r\nsection.pops-panel-container .pops-panel-container-header-ul li {\r\n text-align: left;\r\n display: flex;\r\n justify-content: flex-start !important;\r\n margin: 0px !important;\r\n padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n calc(\r\n var(--pops-panel-forms-margin-left-right) +\r\n var(--pops-panel-forms-container-li-padding-left-right)\r\n );\r\n}\r\nsection.pops-panel-container > ul:last-child {\r\n overflow: auto;\r\n flex: 1;\r\n}\r\naside.pops-panel-aside ul li {\r\n margin: 6px 8px;\r\n border-radius: 4px;\r\n padding: 6px 10px;\r\n cursor: default;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n}\r\naside.pops-panel-aside .pops-is-visited,\r\naside.pops-panel-aside ul li:hover {\r\n color: var(--aside-hover-color);\r\n background: var(--aside-hover-bg-color);\r\n}\r\nsection.pops-panel-container > ul li:not(.pops-panel-forms-container-item) {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin: var(--pops-panel-forms-margin-top-bottom)\r\n calc(\r\n var(--pops-panel-forms-margin-left-right) +\r\n var(--pops-panel-forms-margin-left-right)\r\n );\r\n gap: 10px;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item-header-text {\r\n margin: 10px;\r\n margin-left: calc(\r\n var(--pops-panel-forms-margin-left-right) +\r\n var(--pops-panel-forms-container-li-padding-left-right)\r\n );\r\n font-size: 0.9em;\r\n text-align: left;\r\n color: var(--pops-panel-forms-container-item-title-color);\r\n}\r\nsection.pops-panel-container li.pops-panel-forms-container-item {\r\n display: block;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul {\r\n border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n background: var(--pops-panel-forms-container-item-bg-color);\r\n margin: var(--pops-panel-forms-container-item-margin-top-bottom)\r\n var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px;\r\n margin: 0px var(--pops-panel-forms-container-li-padding-left-right);\r\n border-bottom: 1px solid rgb(229, 229, 229, var(--pops-bd-opacity));\r\n text-align: left;\r\n}\r\nsection.pops-panel-container\r\n .pops-panel-forms-container-item\r\n ul\r\n li.pops-panel-deepMenu-nav-item {\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom)\r\n var(--pops-panel-forms-container-li-padding-left-right);\r\n margin: 0px;\r\n border-bottom: 0;\r\n}\r\nsection.pops-panel-container .pops-panel-forms-container-item ul li:last-child {\r\n border: 0;\r\n}\r\n/* 主文字 */\r\n/*section.pops-panel-container\r\n .pops-panel-forms-container-item\r\n .pops-panel-item-left-text\r\n .pops-panel-item-left-main-text {\r\n line-height: 2;\r\n}*/\r\n/* 描述文字 */\r\nsection.pops-panel-container\r\n .pops-panel-forms-container-item\r\n .pops-panel-item-left-text\r\n .pops-panel-item-left-desc-text {\r\n line-height: normal;\r\n margin-top: 6px;\r\n font-size: 0.8em;\r\n color: rgb(108, 108, 108);\r\n}\r\n\r\n/* 折叠面板 */\r\n\r\nsection.pops-panel-container .pops-panel-forms-fold {\r\n border-radius: var(--pops-panel-forms-container-item-border-radius);\r\n background: var(--pops-panel-forms-container-item-bg-color);\r\n margin: var(--pops-panel-forms-margin-top-bottom)\r\n var(--pops-panel-forms-margin-left-right);\r\n}\r\nsection.pops-panel-container\r\n .pops-panel-forms-fold\r\n .pops-panel-forms-fold-container {\r\n display: flex;\r\n align-items: center;\r\n fill: #6c6c6c;\r\n justify-content: space-between;\r\n margin: 0px var(--pops-panel-forms-container-li-padding-left-right) !important;\r\n padding: var(--pops-panel-forms-container-li-padding-top-bottom) 0px !important;\r\n}\r\nsection.pops-panel-container\r\n .pops-panel-forms-fold[data-fold-enable]\r\n .pops-panel-forms-fold-container-icon {\r\n transform: rotate(90deg);\r\n}\r\nsection.pops-panel-container\r\n .pops-panel-forms-fold\r\n .pops-panel-forms-fold-container-icon {\r\n width: 15px;\r\n height: 15px;\r\n display: flex;\r\n align-items: center;\r\n transform: rotate(-90deg);\r\n transition: transform 0.3s;\r\n}\r\nsection.pops-panel-container\r\n .pops-panel-forms-fold[data-fold-enable]\r\n .pops-panel-forms-container-item-formlist {\r\n height: 0;\r\n}\r\nsection.pops-panel-container\r\n .pops-panel-forms-fold\r\n .pops-panel-forms-container-item-formlist {\r\n transition: height 0.3s;\r\n overflow: hidden;\r\n border-radius: unset;\r\n background: unset;\r\n margin: 0;\r\n height: auto;\r\n height: calc-size(auto, size);\r\n}\r\n/* 折叠面板 */\r\n\r\n/* 姑且认为小于600px的屏幕为移动端 */\r\n@media (max-width: 600px) {\r\n /* 兼容移动端CSS */\r\n .pops[type-value="panel"] {\r\n --pops-panel-forms-margin-left-right: 10px;\r\n }\r\n .pops[type-value="panel"] {\r\n width: 92%;\r\n width: 92vw;\r\n width: 92dvw;\r\n }\r\n .pops[type-value="panel"] .pops-panel-content aside.pops-panel-aside {\r\n max-width: 20%;\r\n min-width: auto;\r\n }\r\n .pops[type-value="panel"]\r\n section.pops-panel-container\r\n .pops-panel-forms-container-item\r\n > div {\r\n text-align: left;\r\n --pops-panel-forms-margin-left-right: 0px;\r\n }\r\n .pops[type-value="panel"]\r\n section.pops-panel-container\r\n .pops-panel-forms-container-item\r\n ul {\r\n margin: 0px !important;\r\n }\r\n .pops[type-value="panel"] section.pops-panel-container > ul > li {\r\n margin: 10px 10px;\r\n }\r\n .pops[type-value="panel"]\r\n section.pops-panel-container\r\n > ul\r\n > li\r\n div:nth-child(2) {\r\n max-width: 55%;\r\n }\r\n .pops[type-value="panel"]\r\n section.pops-panel-container\r\n .pops-panel-select\r\n select {\r\n min-width: 88px !important;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n }\r\n .pops[type-value="panel"]\r\n section.pops-panel-container\r\n .pops-panel-container-header-ul\r\n li {\r\n font-size: 16px;\r\n }\r\n .pops[type-value="panel"] .pops-panel-title p[pops],\r\n .pops[type-value="panel"] section.pops-panel-container > ul li,\r\n .pops[type-value="panel"] aside.pops-panel-aside ul li {\r\n font-size: 14px;\r\n }\r\n}\r\n/* switch的CSS */\r\n.pops-panel-switch {\r\n display: inline-flex;\r\n flex-direction: row-reverse;\r\n align-items: center;\r\n position: relative;\r\n font-size: 14px;\r\n line-height: normal;\r\n align-content: center;\r\n height: 32px;\r\n vertical-align: middle;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -ms-user-select: none;\r\n -moz-user-select: none;\r\n}\r\n.pops-panel-switch input.pops-panel-switch__input {\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n opacity: 0;\r\n margin: 0;\r\n}\r\n.pops-panel-switch:has(input.pops-panel-switch__input:disabled),\r\n.pops-panel-switch[data-disabled],\r\n.pops-panel-switch[data-disabled] .pops-panel-switch__core,\r\n.pops-panel-switch\r\n input.pops-panel-switch__input:disabled\r\n + .pops-panel-switch__core {\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n}\r\n.pops-panel-switch span.pops-panel-switch__core {\r\n display: inline-flex;\r\n position: relative;\r\n align-items: center;\r\n min-width: 40px;\r\n height: 20px;\r\n border: 1px solid rgb(220, 223, 230, var(--pops-bd-opacity));\r\n outline: 0;\r\n border-radius: 10px;\r\n box-sizing: border-box;\r\n background: rgb(220, 223, 230, var(--pops-bg-opacity));\r\n cursor: pointer;\r\n transition: border-color 0.3s, background-color 0.3s;\r\n}\r\n.pops-panel-switch .pops-panel-switch__action {\r\n position: absolute;\r\n left: 1px;\r\n border-radius: 100%;\r\n transition: all 0.3s;\r\n width: 16px;\r\n height: 16px;\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n color: rgb(220, 223, 230);\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked span.pops-panel-switch__core {\r\n border-color: rgb(64, 158, 255, var(--pops-bd-opacity));\r\n background-color: rgb(64, 158, 255, var(--pops-bg-opacity));\r\n}\r\n.pops-panel-switch.pops-panel-switch-is-checked .pops-panel-switch__action {\r\n left: calc(100% - 17px);\r\n color: rgb(64, 158, 255);\r\n}\r\n/* switch的CSS */\r\n\r\n/* slider旧的CSS */\r\nsection.pops-panel-container .pops-panel-slider:has(> input[type="range"]) {\r\n overflow: hidden;\r\n height: 25px;\r\n line-height: normal;\r\n align-content: center;\r\n display: flex;\r\n align-items: center;\r\n}\r\nsection.pops-panel-container .pops-panel-slider input[type="range"] {\r\n height: 6px;\r\n background: rgb(228, 231, 237, var(--pops-bg-opacity));\r\n outline: 0;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 100%;\r\n}\r\nsection.pops-panel-container\r\n .pops-panel-slider\r\n input[type="range"]::-webkit-slider-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\nsection.pops-panel-container\r\n .pops-panel-slider\r\n input[type="range"]::-moz-range-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n border: 1px solid rgb(64, 159, 255, var(--pops-bd-opacity));\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow: 0 0 2px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2);\r\n cursor: pointer;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n}\r\nsection.pops-panel-container\r\n .pops-panel-slider\r\n input[type="range"]::-moz-range-progress {\r\n height: 6px;\r\n border-image: linear-gradient(#409eff, #409eff) 0 fill/9 25 9 0/0 0 0 100vw;\r\n}\r\n/* slider旧的CSS */\r\n\r\n/* slider的CSS */\r\n.pops-slider {\r\n --pops-slider-color-white: #ffffff;\r\n --pops-slider-color-primary: #409eff;\r\n --pops-slider-color-info: #909399;\r\n --pops-slider-text-color-placeholder: #a8abb2;\r\n --pops-slider-border-color-light: #e4e7ed;\r\n --pops-slider-border-radius-circle: 100%;\r\n --pops-slider-transition-duration-fast: 0.2s;\r\n\r\n --pops-slider-main-bg-color: var(--pops-slider-color-primary);\r\n --pops-slider-runway-bg-color: var(--pops-slider-border-color-light);\r\n --pops-slider-stop-bg-color: var(--pops-slider-color-white);\r\n --pops-slider-disabled-color: var(--pops-slider-text-color-placeholder);\r\n --pops-slider-border-radius: 3px;\r\n --pops-slider-height: 6px;\r\n --pops-slider-button-size: 20px;\r\n --pops-slider-button-wrapper-size: 36px;\r\n --pops-slider-button-wrapper-offset: -15px;\r\n}\r\n\r\n.pops-slider {\r\n width: 100%;\r\n height: 32px;\r\n display: flex;\r\n align-items: center;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -ms-user-select: none;\r\n -moz-user-select: none;\r\n}\r\n\r\n.pops-slider-width {\r\n flex: 0 0 52%;\r\n margin-left: 10px;\r\n}\r\n\r\n.pops-slider__runway {\r\n flex: 1;\r\n height: var(--pops-slider-height);\r\n background-color: var(--pops-slider-runway-bg-color);\r\n border-radius: var(--pops-slider-border-radius);\r\n position: relative;\r\n cursor: pointer;\r\n}\r\n\r\n.pops-slider__runway.show-input {\r\n margin-right: 30px;\r\n width: auto;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled {\r\n cursor: default;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__bar {\r\n background-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button {\r\n border-color: var(--pops-slider-disabled-color);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n transform: scale(1);\r\n}\r\n\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button:hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.hover,\r\n.pops-slider__runway.pops-slider-is-disabled .pops-slider__button.dragging {\r\n cursor: not-allowed;\r\n}\r\n\r\n.pops-slider__input {\r\n flex-shrink: 0;\r\n width: 130px;\r\n}\r\n\r\n.pops-slider__bar {\r\n height: var(--pops-slider-height);\r\n background-color: var(--pops-slider-main-bg-color);\r\n border-top-left-radius: var(--pops-slider-border-radius);\r\n border-bottom-left-radius: var(--pops-slider-border-radius);\r\n position: absolute;\r\n}\r\n\r\n.pops-slider__button-wrapper {\r\n height: var(--pops-slider-button-wrapper-size);\r\n width: var(--pops-slider-button-wrapper-size);\r\n position: absolute;\r\n z-index: 1;\r\n top: var(--pops-slider-button-wrapper-offset);\r\n transform: translate(-50%);\r\n background-color: transparent;\r\n text-align: center;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n line-height: normal;\r\n outline: none;\r\n}\r\n\r\n.pops-slider__button-wrapper:after {\r\n display: inline-block;\r\n content: "";\r\n height: 100%;\r\n vertical-align: middle;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n cursor: grab;\r\n}\r\n\r\n.pops-slider__button {\r\n display: inline-block;\r\n width: var(--pops-slider-button-size);\r\n height: var(--pops-slider-button-size);\r\n vertical-align: middle;\r\n border: solid 2px var(--pops-slider-main-bg-color);\r\n background-color: var(--pops-slider-color-white);\r\n border-radius: 50%;\r\n box-sizing: border-box;\r\n transition: var(--pops-slider-transition-duration-fast);\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover,\r\n.pops-slider__button.dragging {\r\n transform: scale(1.2);\r\n}\r\n\r\n.pops-slider__button:hover,\r\n.pops-slider__button.hover {\r\n cursor: grab;\r\n}\r\n\r\n.pops-slider__button.dragging {\r\n cursor: grabbing;\r\n}\r\n\r\n.pops-slider__stop {\r\n position: absolute;\r\n height: var(--pops-slider-height);\r\n width: var(--pops-slider-height);\r\n border-radius: var(--pops-slider-border-radius-circle);\r\n background-color: var(--pops-slider-stop-bg-color);\r\n transform: translate(-50%);\r\n}\r\n\r\n.pops-slider__marks {\r\n top: 0;\r\n left: 12px;\r\n width: 18px;\r\n height: 100%;\r\n}\r\n\r\n.pops-slider__marks-text {\r\n position: absolute;\r\n transform: translate(-50%);\r\n font-size: 14px;\r\n color: var(--pops-slider-color-info);\r\n margin-top: 15px;\r\n white-space: pre;\r\n}\r\n\r\n.pops-slider.is-vertical {\r\n position: relative;\r\n display: inline-flex;\r\n width: auto;\r\n height: 100%;\r\n flex: 0;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__runway {\r\n width: var(--pops-slider-height);\r\n height: 100%;\r\n margin: 0 16px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__bar {\r\n width: var(--pops-slider-height);\r\n height: auto;\r\n border-radius: 0 0 3px 3px;\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__button-wrapper {\r\n top: auto;\r\n left: var(--pops-slider-button-wrapper-offset);\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__stop {\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider.is-vertical .pops-slider__marks-text {\r\n margin-top: 0;\r\n left: 15px;\r\n transform: translateY(50%);\r\n}\r\n\r\n.pops-slider--large {\r\n height: 40px;\r\n}\r\n\r\n.pops-slider--small {\r\n height: 24px;\r\n}\r\n/* slider的CSS */\r\n\r\n/* input的CSS */\r\n.pops-panel-input {\r\n display: flex;\r\n align-items: center;\r\n border: 1px solid #dcdfe6;\r\n border-radius: 4px;\r\n background-color: #ffffff;\r\n position: relative;\r\n}\r\n.pops-panel-input:hover {\r\n box-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-input:has(input:focus) {\r\n outline: 0;\r\n border: 1px solid #409eff;\r\n border-radius: 4px;\r\n box-shadow: none;\r\n}\r\n.pops-panel-input input {\r\n display: inline-flex;\r\n justify-content: center;\r\n text-align: start;\r\n align-items: center;\r\n align-content: center;\r\n white-space: nowrap;\r\n cursor: text;\r\n box-sizing: border-box;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n vertical-align: middle;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n background-color: transparent;\r\n outline: 0;\r\n transition: 0.1s;\r\n border: 0;\r\n font-size: 14px;\r\n font-weight: 500;\r\n line-height: normal;\r\n height: 32px;\r\n width: 100%;\r\n flex: 1;\r\n margin-right: calc(1em + 8px);\r\n padding: 8px 8px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix {\r\n display: inline-flex;\r\n white-space: nowrap;\r\n flex-shrink: 0;\r\n flex-wrap: nowrap;\r\n height: 100%;\r\n text-align: center;\r\n color: #a8abb2;\r\n transition: all 0.3s;\r\n pointer-events: none;\r\n margin: 0 8px;\r\n position: absolute;\r\n right: 0px;\r\n}\r\n.pops-panel-input span.pops-panel-input__suffix-inner {\r\n pointer-events: all;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n cursor: pointer;\r\n}\r\n.pops-panel-input .pops-panel-icon {\r\n height: inherit;\r\n line-height: normal;\r\n align-content: center;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n transition: all 0.3s;\r\n}\r\n.pops-panel-input .pops-panel-icon svg {\r\n height: 1em;\r\n width: 1em;\r\n}\r\n\r\n.pops-input-disabled {\r\n background-color: var(--el-disabled-bg-color);\r\n box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;\r\n}\r\n.pops-panel-input.pops-input-disabled {\r\n border: none;\r\n}\r\n.pops-panel-input.pops-input-disabled:hover {\r\n box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;\r\n}\r\n.pops-panel-input input:disabled,\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n color: var(--el-disabled-text-color);\r\n -webkit-text-fill-color: var(--el-disabled-text-color);\r\n cursor: not-allowed;\r\n}\r\n.pops-panel-input input:disabled + .pops-panel-input__suffix {\r\n display: none;\r\n}\r\n/* input的CSS */\r\n\r\n/* textarea的CSS */\r\n.pops-panel-textarea textarea {\r\n width: 100%;\r\n /*vertical-align: bottom;*/\r\n position: relative;\r\n display: block;\r\n resize: none;\r\n padding: 5px 11px;\r\n /*line-height: 1;*/\r\n box-sizing: border-box;\r\n font-size: inherit;\r\n font-family: inherit;\r\n background-color: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n background-image: none;\r\n -webkit-appearance: none;\r\n appearance: none;\r\n box-shadow: 0 0 0 1px #dcdfe6 inset;\r\n border-radius: 0;\r\n transition: box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);\r\n border: none;\r\n}\r\n.pops-panel-textarea textarea:hover {\r\n box-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-textarea-disable .pops-panel-textarea textarea:hover {\r\n box-shadow: none;\r\n}\r\n.pops-panel-textarea textarea:focus {\r\n outline: 0;\r\n box-shadow: 0 0 0 1px #409eff inset;\r\n}\r\n/* textarea的CSS */\r\n\r\n/* select的CSS */\r\n.pops-panel-select select {\r\n height: 32px;\r\n line-height: normal;\r\n align-content: center;\r\n min-width: 200px;\r\n border: 1px solid rgb(184, 184, 184, var(--pops-bd-opacity));\r\n border-radius: 5px;\r\n text-align: center;\r\n outline: 0;\r\n background: rgb(255, 255, 255, var(--pops-bg-opacity));\r\n box-shadow: none;\r\n}\r\n.pops-panel-select select:hover {\r\n box-shadow: 0 0 0 1px #c0c4cc inset;\r\n}\r\n.pops-panel-select-disable .pops-panel-select select:hover {\r\n box-shadow: none;\r\n}\r\n.pops-panel-select select:focus {\r\n border: 1px solid rgb(64, 158, 255, var(--pops-bd-opacity));\r\n box-shadow: none;\r\n}\r\n/* select的CSS */\r\n\r\n/* select-multiple的CSS*/\r\n.pops-panel-select-multiple {\r\n --el-border-radius-base: 4px;\r\n --el-fill-color-blank: #ffffff;\r\n --el-transition-duration: 0.3s;\r\n --el-border-color: #dcdfe6;\r\n --el-text-color-placeholder: #a8abb2;\r\n --color: inherit;\r\n --el-select-input-color: #a8abb2;\r\n --el-select-input-font-size: 14px;\r\n --el-text-color-regular: #606266;\r\n --el-color-info: #909399;\r\n --el-color-info-light-9: #f4f4f5;\r\n --el-color-info-light-8: #e9e9eb;\r\n --el-color-primary-light-9: #ecf5ff;\r\n --el-color-primary-light-8: #d9ecff;\r\n --el-color-primary: #409eff;\r\n --el-color-white: #ffffff;\r\n width: 200px;\r\n /* 左侧内容*/\r\n /* 左侧内容*/\r\n /* 右侧箭头图标*/\r\n /* 右侧箭头图标*/\r\n /* tag*/\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper {\r\n display: flex;\r\n align-items: center;\r\n position: relative;\r\n box-sizing: border-box;\r\n cursor: pointer;\r\n text-align: left;\r\n font-size: 14px;\r\n padding: 4px 12px;\r\n gap: 6px;\r\n min-height: 32px;\r\n line-height: normal;\r\n align-content: center;\r\n border-radius: var(--el-border-radius-base);\r\n background-color: var(--el-fill-color-blank);\r\n transition: var(--el-transition-duration);\r\n transform: translateZ(0);\r\n box-shadow: 0 0 0 1px var(--el-border-color) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__wrapper.is-focused {\r\n box-shadow: 0 0 0 1px var(--el-color-primary) inset;\r\n}\r\n.pops-panel-select-multiple .el-select__selection {\r\n position: relative;\r\n display: flex;\r\n flex-wrap: wrap;\r\n align-items: center;\r\n flex: 1;\r\n min-width: 0;\r\n gap: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__selected-item {\r\n display: flex;\r\n flex-wrap: wrap;\r\n -webkit-user-select: none;\r\n user-select: none;\r\n}\r\n.pops-panel-select-multiple\r\n .el-select__selected-item.el-select__choose_tag\r\n .el-tag {\r\n max-width: 200px;\r\n}\r\n.pops-panel-select-multiple .el-select__input-wrapper {\r\n max-width: 100%;\r\n}\r\n.pops-panel-select-multiple .el-select__selection.is-near {\r\n margin-left: -8px;\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder {\r\n position: absolute;\r\n display: block;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n width: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n color: var(--el-input-text-color, var(--el-text-color-regular));\r\n}\r\n.pops-panel-select-multiple .el-select__placeholder.is-transparent {\r\n -webkit-user-select: none;\r\n user-select: none;\r\n color: var(--el-text-color-placeholder);\r\n}\r\n.pops-panel-select-multiple .el-select__prefix,\r\n.pops-panel-select-multiple .el-select__suffix {\r\n display: flex;\r\n align-items: center;\r\n flex-shrink: 0;\r\n gap: 6px;\r\n color: var(--el-input-icon-color, var(--el-text-color-placeholder));\r\n}\r\n.pops-panel-select-multiple .el-icon {\r\n --color: inherit;\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n align-content: center;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: var(--color);\r\n font-size: inherit;\r\n}\r\n.pops-panel-select-multiple .el-icon svg {\r\n height: 1em;\r\n width: 1em;\r\n}\r\n.pops-panel-select-multiple .el-select__caret {\r\n color: var(--el-select-input-color);\r\n font-size: var(--el-select-input-font-size);\r\n transition: var(--el-transition-duration);\r\n transform: rotate(0);\r\n cursor: pointer;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n --el-tag-font-size: 12px;\r\n --el-tag-border-radius: 4px;\r\n --el-tag-border-radius-rounded: 9999px;\r\n}\r\n.pops-panel-select-multiple .el-tag {\r\n background-color: var(--el-tag-bg-color);\r\n border-color: var(--el-tag-border-color);\r\n color: var(--el-tag-text-color);\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n vertical-align: middle;\r\n height: 24px;\r\n padding: 0 9px;\r\n font-size: var(--el-tag-font-size);\r\n line-height: normal;\r\n align-content: center;\r\n border-width: 1px;\r\n border-style: solid;\r\n border-radius: var(--el-tag-border-radius);\r\n box-sizing: border-box;\r\n white-space: nowrap;\r\n --el-icon-size: 14px;\r\n --el-tag-bg-color: var(--el-color-primary-light-9);\r\n --el-tag-border-color: var(--el-color-primary-light-8);\r\n --el-tag-hover-color: var(--el-color-primary);\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag {\r\n cursor: pointer;\r\n border-color: transparent;\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n --el-tag-bg-color: var(--el-color-info-light-9);\r\n --el-tag-border-color: var(--el-color-info-light-8);\r\n --el-tag-hover-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.el-tag--info {\r\n --el-tag-text-color: var(--el-color-info);\r\n}\r\n.pops-panel-select-multiple .el-tag.is-closable {\r\n padding-right: 5px;\r\n}\r\n.pops-panel-select-multiple .el-select__selection .el-tag .el-tag__content {\r\n min-width: 0;\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n flex-shrink: 0;\r\n color: var(--el-tag-text-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close:hover {\r\n color: var(--el-color-white);\r\n background-color: var(--el-tag-hover-color);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-icon {\r\n border-radius: 50%;\r\n cursor: pointer;\r\n font-size: calc(var(--el-icon-size) - 2px);\r\n height: var(--el-icon-size);\r\n width: var(--el-icon-size);\r\n}\r\n.pops-panel-select-multiple .el-tag .el-tag__close {\r\n margin-left: 6px;\r\n}\r\n.pops-panel-select-multiple .el-select__tags-text {\r\n display: block;\r\n line-height: normal;\r\n align-content: center;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n white-space: nowrap;\r\n}\r\n/* select-multiple的CSS*/\r\n\r\n/* deepMenu的css */\r\n.pops-panel-deepMenu-nav-item {\r\n cursor: pointer;\r\n}\r\n.pops-panel-deepMenu-nav-item:active {\r\n background: #e9e9e9;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu {\r\n display: flex;\r\n align-items: center;\r\n color: #6c6c6c;\r\n fill: #6c6c6c;\r\n}\r\n.pops-panel-deepMenu-nav-item .pops-panel-deepMenu-arrowRight-icon {\r\n width: 15px;\r\n height: 15px;\r\n display: flex;\r\n align-items: center;\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-header {\r\n display: flex;\r\n align-items: center;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n padding: var(--pops-panel-forms-header-padding-top-bottom)\r\n calc(\r\n var(--pops-panel-forms-margin-left-right) +\r\n var(--pops-panel-forms-container-li-padding-left-right) -\r\n var(--pops-panel-forms-header-icon-size)\r\n );\r\n}\r\n.pops-panel-deepMenu-container .pops-panel-deepMenu-container-left-arrow-icon {\r\n width: var(--pops-panel-forms-header-icon-size);\r\n height: var(--pops-panel-forms-header-icon-size);\r\n display: flex;\r\n align-items: center;\r\n cursor: pointer;\r\n}\r\n/* 修复safari上图标大小未正常显示 */\r\n.pops-panel-deepMenu-container\r\n .pops-panel-deepMenu-container-left-arrow-icon\r\n > svg {\r\n width: inherit;\r\n height: inherit;\r\n}\r\n/* deepMenu的css */\r\n';
var rightClickMenuCSS = '.pops-rightClickMenu * {\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n -webkit-tap-highlight-color: transparent;\r\n scrollbar-width: thin;\r\n}\r\n.pops-rightClickMenu {\r\n position: fixed;\r\n z-index: 10000;\r\n text-align: center;\r\n border-radius: 3px;\r\n font-size: 16px;\r\n font-weight: 500;\r\n background: #fff;\r\n box-shadow: 0px 1px 6px 1px #cacaca;\r\n}\r\n.pops-rightClickMenu-anim-grid {\r\n display: grid;\r\n transition: 0.3s;\r\n grid-template-rows: 0fr;\r\n}\r\n.pops-rightClickMenu-anim-show {\r\n grid-template-rows: 1fr;\r\n}\r\n.pops-rightClickMenu-is-visited {\r\n background: #dfdfdf;\r\n}\r\ni.pops-rightClickMenu-icon {\r\n height: 1em;\r\n width: 1em;\r\n line-height: normal;\r\n align-content: center;\r\n display: inline-flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n fill: currentColor;\r\n color: inherit;\r\n font-size: inherit;\r\n margin-right: 6px;\r\n}\r\ni.pops-rightClickMenu-icon[is-loading="true"] {\r\n animation: rotating 2s linear infinite;\r\n}\r\n.pops-rightClickMenu li:hover {\r\n background: #dfdfdf;\r\n cursor: pointer;\r\n}\r\n.pops-rightClickMenu ul {\r\n margin: 0;\r\n padding: 0;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n justify-content: center;\r\n overflow: hidden;\r\n}\r\n.pops-rightClickMenu ul li {\r\n padding: 5px 10px;\r\n margin: 2.5px 5px;\r\n border-radius: 3px;\r\n display: flex;\r\n width: -webkit-fill-available;\r\n width: -moz-available;\r\n text-align: left;\r\n user-select: none;\r\n -webkit-user-select: none;\r\n -moz-user-select: none;\r\n -ms-user-select: none;\r\n align-items: center;\r\n}\r\n.pops-rightClickMenu ul li:first-child {\r\n margin-top: 5px;\r\n}\r\n.pops-rightClickMenu ul li:last-child {\r\n margin-bottom: 5px;\r\n}\r\n';
var SVG_min = '\r\n';
var SVG_mise = '\r\n';
var SVG_max = '\r\n';
var SVG_close = '\r\n';
var SVG_edit = '\r\n';
var SVG_share = '\r\n';
var SVG_delete = '\r\n';
var SVG_search = '\r\n';
var SVG_upload = '\r\n';
var SVG_loading = '\r\n';
var SVG_next = '\r\n';
var SVG_prev = '\r\n';
var SVG_eleme = '\r\n';
var SVG_elemePlus = '\r\n';
var SVG_chromeFilled = '
${config.style != null ? `` : ""}
`
);
},
/**
* 获取顶部按钮层HTML
* @param type
* @param config
*/
getHeaderBtnHTML(type, config) {
var _a2, _b, _c, _d, _e;
if (!config.btn) {
return "";
}
let __config_confirm = config;
if (type !== "iframe" && !((_b = (_a2 = __config_confirm.btn) == null ? void 0 : _a2.close) == null ? void 0 : _b.enable)) {
return "";
}
let resultHTML = "";
let closeHTML = "";
let __config_iframe = config;
if (type === "iframe" && ((_c = __config_iframe.topRightButton) == null ? void 0 : _c.trim()) !== "") {
let topRightButtonHTML = "";
__config_iframe.topRightButton.split("|").forEach((item) => {
item = item.toLowerCase();
topRightButtonHTML += `
`;
});
resultHTML = `
${html}
${topRightButtonHTML}
`;
} else {
if ((_e = (_d = __config_confirm.btn) == null ? void 0 : _d.close) == null ? void 0 : _e.enable) {
closeHTML = `
${ohterHTML}
`;
} else {
resultHTML = `
${okHTML}
${cancelHTML}
${okHTML}
${cancelHTML}
${ohterHTML}
`;
}
return resultHTML;
},
/**
* 获取标题style
* @param type
* @param config
*/
getHeaderStyle(type, config) {
var _a2, _b, _c, _d;
return {
headerStyle: ((_a2 = config == null ? void 0 : config.title) == null ? void 0 : _a2.html) ? ((_b = config == null ? void 0 : config.title) == null ? void 0 : _b.style) || "" : "",
headerPStyle: ((_c = config == null ? void 0 : config.title) == null ? void 0 : _c.html) ? "" : ((_d = config == null ? void 0 : config.title) == null ? void 0 : _d.style) || ""
};
},
/**
* 获取内容style
* @param type
* @param config
*/
getContentStyle(type, config) {
var _a2, _b, _c, _d;
return {
contentStyle: ((_a2 = config == null ? void 0 : config.content) == null ? void 0 : _a2.html) ? ((_b = config == null ? void 0 : config.content) == null ? void 0 : _b.style) || "" : "",
contentPStyle: ((_c = config == null ? void 0 : config.content) == null ? void 0 : _c.html) ? "" : ((_d = config == null ? void 0 : config.content) == null ? void 0 : _d.style) || ""
};
},
/**
* 将html转换成元素
* @param html
*/
parseElement(html) {
return popsUtils.parseTextToDOM(html);
}
};
const PopsHandler = {
/**
* 创建shadow
*/
handlerShadow(config) {
let $shadowContainer = document.createElement("div");
$shadowContainer.className = "pops-shadow-container";
if (config.useShadowRoot) {
let $shadowRoot = $shadowContainer.attachShadow({ mode: "open" });
return {
$shadowContainer,
$shadowRoot
};
} else {
return {
$shadowContainer,
$shadowRoot: $shadowContainer
};
}
},
/**
* 处理初始化
* @param $shadowRoot 所在的shadowRoot
* @param cssText 添加进ShadowRoot的CSS
*/
handleInit($shadowRoot, cssText) {
pops.init();
if (!arguments.length) {
return;
}
if (Array.isArray(cssText)) {
for (let index = 0; index < cssText.length; index++) {
this.handleInit($shadowRoot, cssText[index]);
}
} else {
let $css = popsDOMUtils.createElement("style", {
innerHTML: cssText
}, {
"data-type": "PopsHandler.handleInit"
});
$shadowRoot.appendChild($css);
}
},
/**
* 处理遮罩层
*
* + 设置遮罩层的点击事件
* @param details 传递的配置
*/
handleMask(details = {}) {
let result2 = {
maskElement: popsUtils.parseTextToDOM(details.maskHTML)
};
let isMaskClick = false;
function clickEvent(event) {
popsDOMUtils.preventEvent(event);
let targetLayer = pops.config.layer[details.type];
function originalRun() {
if (details.config.mask.clickEvent.toClose) {
PopsInstanceUtils.close(details.type, targetLayer, details.guid, details.config, details.animElement);
} else if (details.config.mask.clickEvent.toHide) {
PopsInstanceUtils.hide(details.type, targetLayer, details.guid, details.config, details.animElement, result2.maskElement);
}
}
if (typeof details.config.mask.clickCallBack === "function") {
details.config.mask.clickCallBack(originalRun, details.config);
} else {
originalRun();
}
return false;
}
if (details.config.mask.clickEvent.toClose || details.config.mask.clickEvent.toHide) {
let isAnimElement2 = function(element) {
var _a2;
return Boolean(((_a2 = element == null ? void 0 : element.localName) == null ? void 0 : _a2.toLowerCase()) === "div" && element.className && element.className === "pops-anim" && element.hasAttribute("anim"));
};
popsDOMUtils.on(details.animElement, ["touchstart", "mousedown"], void 0, (event) => {
let $click = event.composedPath()[0];
isMaskClick = isAnimElement2($click);
});
popsDOMUtils.on(details.animElement, "click", void 0, (event) => {
let $click = event.composedPath()[0];
if (isAnimElement2($click) && isMaskClick) {
return clickEvent(event);
}
});
popsDOMUtils.on(result2.maskElement, "click", void 0, (event) => {
isMaskClick = true;
clickEvent(event);
});
}
return result2;
},
/**
* 处理获取元素
* @param animElement
* @param type
*/
handleQueryElement(animElement, type) {
return {
/**
* 主元素
*/
popsElement: animElement.querySelector(".pops[type-value"),
/**
* 确认按钮
*/
btnOkElement: animElement.querySelector(`.pops-${type}-btn-ok`),
/**
* 取消按钮
*/
btnCancelElement: animElement.querySelector(`.pops-${type}-btn-cancel`),
/**
* 其它按钮
*/
btnOtherElement: animElement.querySelector(`.pops-${type}-btn-other`),
/**
* 标题元素
*/
titleElement: animElement.querySelector(`.pops-${type}-title`),
/**
* 输入框元素
*/
inputElement: animElement.querySelector(`.pops-${type}-content textarea[pops]`) ? animElement.querySelector(`.pops-${type}-content textarea[pops]`) : animElement.querySelector(`.pops-${type}-content input[pops]`),
/**
* 顶部按钮控制层元素
*/
headerControlsElement: animElement.querySelector(".pops-header-controls"),
/**
* iframe元素
*/
iframeElement: animElement.querySelector("iframe[pops]"),
/**
* 加载中元素
*/
loadingElement: animElement.querySelector(".pops-loading"),
/**
* 内容元素
*/
contentElement: animElement.querySelector(`.pops-${type}-content`),
/**
* 内容侧边栏容器元素
*/
contentAsideElement: animElement.querySelector(`.pops-${type}-content aside.pops-${type}-aside`),
/**
* 内容主要区域容器元素
*/
contentSectionContainerElement: animElement.querySelector(`.pops-${type}-content section.pops-${type}-container`),
/**
* 内容加载中元素
*/
contentLoadingElement: animElement.querySelector(`.pops-${type}-content-global-loading`),
/**
* 顶部缩小按钮
*/
headerMinBtnElement: animElement.querySelector(".pops-header-control[type='min']"),
/**
* 顶部放大按钮
*/
headerMaxBtnElement: animElement.querySelector(".pops-header-control[type='max']"),
/**
* 顶部恢复原样按钮
*/
headerMiseBtnElement: animElement.querySelector(".pops-header-control[type='mise']"),
/**
* 顶部关闭按钮
*/
headerCloseBtnElement: animElement.querySelector(".pops-header-control[type='close']"),
/**
* 文件夹列表元素
*/
folderListElement: animElement.querySelector(".pops-folder-list"),
/**
* 文件夹列表顶部元素
*/
folderListHeaderElement: animElement.querySelector(".pops-folder-list .pops-folder-list-table__header-div"),
/**
* 文件夹列表行元素
*/
folderListHeaderRowElement: animElement.querySelector(".pops-folder-list .pops-folder-list-table__header-div .pops-folder-list-table__header-row"),
/**
* 文件夹列表tbody元素
*/
folderListBodyElement: animElement.querySelector(".pops-folder-list .pops-folder-list-table__body-div tbody"),
/**
* 文件夹列表primary元素
*/
folderFileListBreadcrumbPrimaryElement: animElement.querySelector(".pops-folder-list .pops-folder-file-list-breadcrumb-primary"),
/**
* 文件夹排序按钮-文件名
*/
folderListSortFileNameElement: animElement.querySelector('.pops-folder-list-table__sort[data-sort="fileName"]'),
/**
* 文件夹排序按钮-修改时间
*/
folderListSortLatestTimeElement: animElement.querySelector('.pops-folder-list-table__sort[data-sort="latestTime"]'),
/**
* 文件夹排序按钮-文件大小
*/
folderListSortFileSizeElement: animElement.querySelector('.pops-folder-list-table__sort[data-sort="fileSize"]')
};
},
/**
* 获取事件配置
* @param guid
* @param $shadowContainer
* @param $shadowRoot
* @param mode 当前弹窗类型
* @param animElement 动画层
* @param popsElement 主元素
* @param maskElement 遮罩层
* @param config 当前配置
*/
handleEventDetails(guid, $shadowContainer, $shadowRoot, mode, animElement, popsElement, maskElement, config) {
return {
$shadowContainer,
$shadowRoot,
element: animElement,
animElement,
popsElement,
maskElement,
mode,
guid,
close() {
PopsInstanceUtils.close(mode, pops.config.layer[mode], guid, config, animElement);
},
hide() {
PopsInstanceUtils.hide(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
},
show() {
PopsInstanceUtils.show(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
}
};
},
/**
* 获取loading的事件配置
* @param guid
* @param mode 当前弹窗类型
* @param animElement 动画层
* @param popsElement 主元素
* @param maskElement 遮罩层
* @param config 当前配置
*/
handleLoadingEventDetails(guid, mode, animElement, popsElement, maskElement, config) {
return {
element: animElement,
animElement,
popsElement,
maskElement,
mode,
guid,
close() {
PopsInstanceUtils.close(mode, pops.config.layer[mode], guid, config, animElement);
},
hide() {
PopsInstanceUtils.hide(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
},
show() {
PopsInstanceUtils.show(mode, pops.config.layer[mode], guid, config, animElement, maskElement);
}
};
},
/**
* 处理返回的配置，针对popsHandler.handleEventDetails
*/
handleResultDetails(details) {
let resultDetails = Object.assign({}, details);
popsUtils.delete(resultDetails, "type");
popsUtils.delete(resultDetails, "function");
return resultDetails;
},
/**
* 处理点击事件
* @param type 当前按钮类型
* @param $btn 按钮元素
* @param eventDetails 事件配置，由popsHandler.handleEventDetails创建的
* @param callback 点击回调
*/
handleClickEvent(type, $btn, eventDetails, callback2) {
popsDOMUtils.on($btn, "click", (event) => {
let extraParam = {
type
};
callback2(Object.assign(eventDetails, extraParam), event);
}, {
capture: true
});
},
/**
* 全局监听键盘事件
* @param keyName 键名|键值
* @param otherKeyList 组合按键，数组类型，包含ctrl、shift、alt和meta（win键或mac的cmd键）
* @param callback 回调函数
*/
handleKeyboardEvent(keyName, otherKeyList = [], callback2) {
let keyboardEvent = function(event) {
let _keyName = event.code || event.key;
let _keyValue = event.charCode || event.keyCode || event.which;
if (otherKeyList.includes("ctrl") && !event.ctrlKey) {
return;
}
if (otherKeyList.includes("alt") && !event.altKey) {
return;
}
if (otherKeyList.includes("meta") && !event.metaKey) {
return;
}
if (otherKeyList.includes("shift") && !event.shiftKey) {
return;
}
if (typeof keyName === "string" && keyName === _keyName) {
callback2 && callback2(event);
} else if (typeof keyName === "number" && keyName === _keyValue) {
callback2 && callback2(event);
}
};
popsDOMUtils.on(PopsCore.globalThis, "keydown", keyboardEvent, {
capture: true
});
return {
removeKeyboardEvent() {
popsDOMUtils.off(globalThis, "keydown", keyboardEvent, {
capture: true
});
}
};
},
/**
* 处理prompt的点击事件
* @param type 触发事件类型
* @param inputElement 输入框
* @param $btn 按钮元素
* @param eventDetails 事件配置，由popsHandler.handleEventDetails创建的
* @param callback 点击回调
*/
handlePromptClickEvent(type, inputElement, $btn, eventDetails, callback2) {
popsDOMUtils.on($btn, "click", (event) => {
let extraParam = {
type,
text: inputElement.value
};
callback2(Object.assign(eventDetails, extraParam), event);
}, {
capture: true
});
},
/**
* 把配置的z-index配置转为数字
* @param zIndex
*/
handleZIndex(zIndex) {
if (typeof zIndex === "function") {
return zIndex();
} else {
return zIndex;
}
},
/**
* 处理config.only
* @param type 当前弹窗类型
* @param config 配置
*/
handleOnly(type, config) {
if (config.only) {
if (type === "loading" || type === "tooltip" || type === "rightClickMenu") {
let layer = pops.config.layer[type];
if (layer) {
PopsInstanceUtils.removeInstance([layer], "", true);
}
} else {
PopsInstanceUtils.removeInstance([
pops.config.layer.alert,
pops.config.layer.confirm,
pops.config.layer.prompt,
pops.config.layer.iframe,
pops.config.layer.drawer,
pops.config.layer.folder,
pops.config.layer.panel
], "", true);
}
} else {
let originZIndex = config.zIndex;
config.zIndex = () => {
const { zIndex: maxZIndex } = PopsInstanceUtils.getPopsMaxZIndex(PopsHandler.handleZIndex(originZIndex) + 100);
return maxZIndex;
};
}
return config;
},
/**
* 处理把已创建的元素保存到内部环境中
* @param type 当前弹窗类型
* @param value
*/
handlePush(type, value) {
pops.config.layer[type].push(value);
}
};
const PopsAlertConfig = () => {
return {
title: {
text: "默认标题",
position: "left",
html: false,
style: ""
},
content: {
text: "默认内容",
html: false,
style: ""
},
btn: {
position: "flex-end",
ok: {
size: void 0,
enable: true,
icon: void 0,
rightIcon: false,
iconIsLoading: false,
text: "确定",
type: "primary",
callback: function(details) {
details.close();
}
},
close: {
enable: true,
callback: function(details) {
details.close();
}
}
},
useShadowRoot: true,
class: "",
only: false,
width: "350px",
height: "200px",
position: "center",
animation: "pops-anim-fadein-zoom",
zIndex: 1e4,
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false
},
clickCallBack: null
},
drag: false,
dragLimit: true,
dragExtraDistance: 3,
dragMoveCallBack() {
},
dragEndCallBack() {
},
forbiddenScroll: false,
style: null,
beforeAppendToPageCallBack() {
}
};
};
class PopsAlert {
constructor(details) {
const guid = popsUtils.getRandomGUID();
const PopsType = "alert";
let config = PopsAlertConfig();
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
config = popsUtils.assign(config, details);
config = PopsHandler.handleOnly(PopsType, config);
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.ninePalaceGridPosition,
pops.config.cssText.scrollbar,
pops.config.cssText.button,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.alertCSS
]);
let zIndex = PopsHandler.handleZIndex(config.zIndex);
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
/*html*/
`
${config.title.html ? config.title.text : `
${config.title.text}
`} ${headerBtnHTML}
${config.content.html ? config.content.text : `
${bottomBtnHTML}`,
bottomBtnHTML,
zIndex
);
let $anim = PopsElementHandler.parseElement(animHTML);
let { popsElement: $pops, headerCloseBtnElement: $headerCloseBtn, btnOkElement, titleElement: $title } = PopsHandler.handleQueryElement($anim, PopsType);
let $mask = null;
let elementList = [$anim];
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid,
config,
animElement: $anim,
maskHTML
});
$mask = _handleMask_.maskElement;
elementList.push($mask);
}
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, PopsType, $anim, $pops, $mask, config);
PopsHandler.handleClickEvent("close", $headerCloseBtn, eventDetails, config.btn.close.callback);
PopsHandler.handleClickEvent("ok", btnOkElement, eventDetails, config.btn.ok.callback);
popsDOMUtils.append($shadowRoot, elementList);
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
popsDOMUtils.appendBody($shadowContainer);
if ($mask != null) {
$anim.after($mask);
}
PopsHandler.handlePush(PopsType, {
guid,
animElement: $anim,
popsElement: $pops,
maskElement: $mask,
$shadowContainer,
$shadowRoot
});
if (config.drag) {
PopsInstanceUtils.drag($pops, {
dragElement: $title,
limit: config.dragLimit,
extraDistance: config.dragExtraDistance,
moveCallBack: config.dragMoveCallBack,
endCallBack: config.dragEndCallBack
});
}
return PopsHandler.handleResultDetails(eventDetails);
}
}
const PopsConfirmConfig = () => {
return {
title: {
text: "默认标题",
position: "left",
html: false,
style: ""
},
content: {
text: "默认内容",
html: false,
style: ""
},
btn: {
merge: false,
mergeReverse: false,
reverse: false,
position: "flex-end",
ok: {
enable: true,
size: void 0,
icon: void 0,
rightIcon: false,
iconIsLoading: false,
text: "确定",
type: "primary",
callback(detail) {
detail.close();
}
},
cancel: {
enable: true,
size: void 0,
icon: void 0,
rightIcon: false,
iconIsLoading: false,
text: "关闭",
type: "default",
callback(detail) {
detail.close();
}
},
other: {
enable: false,
size: void 0,
icon: void 0,
rightIcon: false,
iconIsLoading: false,
text: "其它按钮",
type: "default",
callback(detail) {
detail.close();
}
},
close: {
enable: true,
callback(detail) {
detail.close();
}
}
},
useShadowRoot: true,
class: "",
only: false,
width: "350px",
height: "200px",
position: "center",
animation: "pops-anim-fadein-zoom",
zIndex: 1e4,
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false
},
clickCallBack: null
},
drag: false,
dragLimit: true,
dragExtraDistance: 3,
dragMoveCallBack() {
},
dragEndCallBack() {
},
forbiddenScroll: false,
style: null,
beforeAppendToPageCallBack() {
}
};
};
class PopsConfirm {
constructor(details) {
const guid = popsUtils.getRandomGUID();
const PopsType = "confirm";
let config = PopsConfirmConfig();
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
config = popsUtils.assign(config, details);
config = PopsHandler.handleOnly(PopsType, config);
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.ninePalaceGridPosition,
pops.config.cssText.scrollbar,
pops.config.cssText.button,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.confirmCSS
]);
let zIndex = PopsHandler.handleZIndex(config.zIndex);
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
let { contentStyle, contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
/*html*/
`
${config.content.text}
`}
${config.title.html ? config.title.text : `
${config.title.text}
`} ${headerBtnHTML}
${config.content.html ? config.content.text : `
${bottomBtnHTML}
`,
bottomBtnHTML,
zIndex
);
let $anim = PopsElementHandler.parseElement(animHTML);
let { popsElement: $pops, titleElement: $title, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther } = PopsHandler.handleQueryElement($anim, PopsType);
let $mask = null;
let elementList = [$anim];
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid,
config,
animElement: $anim,
maskHTML
});
$mask = _handleMask_.maskElement;
elementList.push($mask);
}
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, PopsType, $anim, $pops, $mask, config);
PopsHandler.handleClickEvent("close", $btnClose, eventDetails, config.btn.close.callback);
PopsHandler.handleClickEvent("ok", $btnOk, eventDetails, config.btn.ok.callback);
PopsHandler.handleClickEvent("cancel", $btnCancel, eventDetails, config.btn.cancel.callback);
PopsHandler.handleClickEvent("other", $btnOther, eventDetails, config.btn.other.callback);
popsDOMUtils.append($shadowRoot, elementList);
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
popsDOMUtils.appendBody($shadowContainer);
if ($mask != null) {
$anim.after($mask);
}
PopsHandler.handlePush(PopsType, {
guid,
animElement: $anim,
popsElement: $pops,
maskElement: $mask,
$shadowContainer,
$shadowRoot
});
if (config.drag) {
PopsInstanceUtils.drag($pops, {
dragElement: $title,
limit: config.dragLimit,
extraDistance: config.dragExtraDistance,
moveCallBack: config.dragMoveCallBack,
endCallBack: config.dragEndCallBack
});
}
return PopsHandler.handleResultDetails(eventDetails);
}
}
const PopsPromptConfig = () => {
return {
title: {
text: "默认标题",
position: "left",
html: false,
style: ""
},
content: {
text: "",
select: false,
password: false,
row: false,
focus: true,
placeholder: "默认提示",
style: ""
},
btn: {
merge: false,
mergeReverse: false,
reverse: false,
position: "flex-end",
ok: {
enable: true,
size: void 0,
icon: void 0,
rightIcon: false,
iconIsLoading: false,
text: "确定",
type: "success",
callback(detail) {
detail.close();
}
},
cancel: {
enable: true,
size: void 0,
icon: void 0,
rightIcon: false,
iconIsLoading: false,
text: "关闭",
type: "default",
callback(detail) {
detail.close();
}
},
other: {
enable: false,
size: void 0,
icon: void 0,
rightIcon: false,
iconIsLoading: false,
text: "其它按钮",
type: "default",
callback(detail) {
detail.close();
}
},
close: {
enable: true,
callback(detail) {
detail.close();
}
}
},
useShadowRoot: true,
class: "",
only: false,
width: "350px",
height: "200px",
position: "center",
animation: "pops-anim-fadein-zoom",
zIndex: 1e4,
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false
},
clickCallBack: null
},
drag: false,
dragLimit: true,
dragExtraDistance: 3,
dragMoveCallBack() {
},
dragEndCallBack() {
},
forbiddenScroll: false,
style: null,
beforeAppendToPageCallBack() {
}
};
};
class PopsPrompt {
constructor(details) {
const guid = popsUtils.getRandomGUID();
const PopsType = "prompt";
let config = PopsPromptConfig();
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
config = popsUtils.assign(config, details);
config = PopsHandler.handleOnly(PopsType, config);
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.ninePalaceGridPosition,
pops.config.cssText.scrollbar,
pops.config.cssText.button,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.promptCSS
]);
let zIndex = PopsHandler.handleZIndex(config.zIndex);
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
let { contentPStyle } = PopsElementHandler.getContentStyle(PopsType, config);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
/*html*/
`
${config.content.text}
`}
${config.title.html ? config.title.text : `
${config.title.text}
`} ${headerBtnHTML}
${config.content.row ? '' : ''}
${bottomBtnHTML}
`,
bottomBtnHTML,
zIndex
);
let $anim = PopsElementHandler.parseElement(animHTML);
let { popsElement: $pops, inputElement: $input, headerCloseBtnElement: $btnClose, btnOkElement: $btnOk, btnCancelElement: $btnCancel, btnOtherElement: $btnOther, titleElement: $title } = PopsHandler.handleQueryElement($anim, PopsType);
let $mask = null;
let elementList = [$anim];
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid,
config,
animElement: $anim,
maskHTML
});
$mask = _handleMask_.maskElement;
elementList.push($mask);
}
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, PopsType, $anim, $pops, $mask, config);
$input.value = config.content.text;
PopsHandler.handlePromptClickEvent("close", $input, $btnClose, eventDetails, config.btn.close.callback);
PopsHandler.handlePromptClickEvent("ok", $input, $btnOk, eventDetails, config.btn.ok.callback);
PopsHandler.handlePromptClickEvent("cancel", $input, $btnCancel, eventDetails, config.btn.cancel.callback);
PopsHandler.handlePromptClickEvent("other", $input, $btnOther, eventDetails, config.btn.other.callback);
popsDOMUtils.append($shadowRoot, elementList);
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
popsDOMUtils.appendBody($shadowContainer);
if ($mask != null) {
$anim.after($mask);
}
PopsHandler.handlePush(PopsType, {
guid,
animElement: $anim,
popsElement: $pops,
maskElement: $mask,
$shadowContainer,
$shadowRoot
});
if (config.drag) {
PopsInstanceUtils.drag($pops, {
dragElement: $title,
limit: config.dragLimit,
extraDistance: config.dragExtraDistance,
moveCallBack: config.dragMoveCallBack,
endCallBack: config.dragEndCallBack
});
}
if (config.content.focus) {
$input.focus();
}
if (config.content.select) {
$input.select();
}
return PopsHandler.handleResultDetails(eventDetails);
}
}
const PopsLoadingConfig = () => {
return {
parent: document.body,
content: {
text: "加载中...",
icon: "loading",
style: ""
},
useShadowRoot: true,
class: "",
only: false,
zIndex: 1e4,
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false
},
clickCallBack: null
},
animation: "pops-anim-fadein-zoom",
forbiddenScroll: false,
style: null,
addIndexCSS: true
};
};
class PopsLoading {
constructor(details) {
let config = PopsLoadingConfig();
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
config = popsUtils.assign(config, details);
let guid = popsUtils.getRandomGUID();
const PopsType = "loading";
config = PopsHandler.handleOnly(PopsType, config);
let zIndex = PopsHandler.handleZIndex(config.zIndex);
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
let { contentPStyle } = PopsElementHandler.getContentStyle("loading", config);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
/*html*/
`
${config.addIndexCSS ? `
` : ""}
${config.style != null ? `` : ""}
`,
"",
zIndex
);
let $anim = PopsElementHandler.parseElement(animHTML);
let { popsElement: $pops } = PopsHandler.handleQueryElement($anim, PopsType);
let $mask = null;
let elementList = [$anim];
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid,
config,
animElement: $anim,
maskHTML
});
$mask = _handleMask_.maskElement;
elementList.push($mask);
}
let eventDetails = PopsHandler.handleLoadingEventDetails(guid, PopsType, $anim, $pops, $mask, config);
popsDOMUtils.append(config.parent, elementList);
if ($mask != null) {
$anim.after($mask);
}
PopsHandler.handlePush(PopsType, {
guid,
animElement: $anim,
popsElement: $pops,
maskElement: $mask
});
return PopsHandler.handleResultDetails(eventDetails);
}
}
const PopsIframeConfig = () => {
return {
title: {
position: "center",
text: "",
html: false,
style: ""
},
loading: {
enable: true,
icon: true,
text: ""
},
useShadowRoot: true,
class: "",
url: window.location.href,
only: false,
zIndex: 1e4,
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false
},
clickCallBack: null
},
animation: "pops-anim-fadein-zoom",
position: "center",
drag: true,
dragLimit: true,
dragExtraDistance: 3,
dragMoveCallBack() {
},
dragEndCallBack() {
},
width: "300px",
height: "250px",
topRightButton: "min|max|mise|close",
sandbox: false,
forbiddenScroll: false,
loadEndCallBack() {
},
btn: {
min: {
callback() {
}
},
max: {
callback() {
}
},
mise: {
callback() {
}
},
close: {
callback() {
}
}
},
style: null,
beforeAppendToPageCallBack() {
}
};
};
class PopsIframe {
constructor(details) {
var _a2;
const guid = popsUtils.getRandomGUID();
const PopsType = "iframe";
let config = PopsIframeConfig();
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
config = popsUtils.assign(config, details);
if (config.url == null) {
throw "config.url不能为空";
}
config = PopsHandler.handleOnly(PopsType, config);
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.ninePalaceGridPosition,
pops.config.cssText.scrollbar,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.iframeCSS
]);
let maskExtraStyle = (
// @ts-ignore
config.animation != null && config.animation != "" ? "position:absolute;" : ""
);
let zIndex = PopsHandler.handleZIndex(config.zIndex);
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex, maskExtraStyle);
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
let iframeLoadingHTML = '';
let titleText = config.title.text.trim() !== "" ? config.title.text : config.url;
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
let animHTML = PopsElementHandler.getAnimHTML(
guid,
PopsType,
config,
/*html*/
`
${config.content.text}
${config.title.html ? titleText : `
${titleText}
`} ${headerBtnHTML}
${config.title.html ? config.title.text : `
` : ""}
${config.title.text}
`} ${headerBtnHTML}
${config.content.html ? config.content.text : `
${bottomBtnHTML}
`,
bottomBtnHTML,
zIndex
);
let $anim = PopsElementHandler.parseElement(animHTML);
let { popsElement, headerCloseBtnElement, btnCancelElement, btnOkElement, btnOtherElement } = PopsHandler.handleQueryElement($anim, PopsType);
let $pops = popsElement;
let $headerCloseBtn = headerCloseBtnElement;
let $btnCancel = btnCancelElement;
let $btnOk = btnOkElement;
let $btnOther = btnOtherElement;
let $mask = null;
let elementList = [$anim];
if (config.mask.enable) {
let _handleMask_ = PopsHandler.handleMask({
type: PopsType,
guid,
config,
animElement: $anim,
maskHTML
});
$mask = _handleMask_.maskElement;
elementList.push($mask);
}
let eventDetails = PopsHandler.handleEventDetails(guid, $shadowContainer, $shadowRoot, PopsType, $anim, $pops, $mask, config);
$pops.setAttribute("direction", config.direction);
if (config.direction === "top") {
$pops.style.setProperty("height", "0");
$pops.style.setProperty("border-radius", `0px 0px ${config.borderRadius}px ${config.borderRadius}px`);
} else if (config.direction === "bottom") {
$pops.style.setProperty("height", "0");
$pops.style.setProperty("border-radius", `${config.borderRadius}px ${config.borderRadius}px 0px 0px`);
} else if (config.direction === "left") {
$pops.style.setProperty("width", "0");
$pops.style.setProperty("border-radius", `0px ${config.borderRadius}px 0px ${config.borderRadius}px`);
} else if (config.direction === "right") {
$pops.style.setProperty("width", "0");
$pops.style.setProperty("border-radius", `${config.borderRadius}px 0px ${config.borderRadius}px 0px`);
}
if (config.closeOnPressEscape) {
PopsHandler.handleKeyboardEvent("Escape", [], function() {
eventDetails.close();
});
}
let needHandleClickEventList = [
{
type: "close",
ele: $headerCloseBtn
},
{
type: "cancel",
ele: $btnCancel
},
{
type: "ok",
ele: $btnOk
},
{
type: "other",
ele: $btnOther
}
];
needHandleClickEventList.forEach((item) => {
PopsHandler.handleClickEvent(item.type, item.ele, eventDetails, (_eventDetails_) => {
if (typeof config.btn[item.type].callback === "function") {
config.btn[item.type].callback(_eventDetails_);
}
});
});
elementList.forEach((element) => {
element.style.setProperty("display", "none");
if (["top"].includes(config.direction)) {
$pops.style.setProperty("height", config.size.toString());
$pops.style.setProperty("transform", "translateY(-100%)");
} else if (["bottom"].includes(config.direction)) {
$pops.style.setProperty("height", config.size.toString());
$pops.style.setProperty("transform", "translateY(100%)");
} else if (["left"].includes(config.direction)) {
$pops.style.setProperty("width", config.size.toString());
$pops.style.setProperty("transform", "translateX(-100%)");
} else if (["right"].includes(config.direction)) {
$pops.style.setProperty("width", config.size.toString());
$pops.style.setProperty("transform", "translateX(100%)");
}
element.style.setProperty("display", "");
});
popsDOMUtils.append($shadowRoot, elementList);
if (typeof config.beforeAppendToPageCallBack === "function") {
config.beforeAppendToPageCallBack($shadowRoot, $shadowContainer);
}
popsDOMUtils.appendBody($shadowContainer);
setTimeout(() => {
setTimeout(() => {
$pops.style.setProperty("transform", "");
}, config.openDelay);
}, 50);
if ($mask != null) {
$anim.after($mask);
}
PopsHandler.handlePush(PopsType, {
guid,
animElement: $anim,
popsElement: $pops,
maskElement: $mask,
$shadowContainer,
$shadowRoot
});
return PopsHandler.handleResultDetails(eventDetails);
}
}
const PopsFolderConfig = () => {
return {
title: {
text: "pops.Folder",
position: "center",
html: false,
style: ""
},
sort: {
name: "latestTime",
isDesc: false,
// @ts-ignore
callback() {
}
},
folder: [
{
fileName: "测试文件夹",
fileSize: 0,
fileType: "",
createTime: 0,
latestTime: 0,
isFolder: true,
index: 0,
// @ts-ignore
clickEvent() {
return [
{
fileName: "内部-测试文件.zip",
fileSize: 1025e3,
fileType: "zip",
createTime: 1702038410440,
latestTime: 1702039602126,
isFolder: false,
index: 1,
clickEvent() {
console.log("下载文件：", this.fileName);
return "https://update.greasyfork.org/scripts/456485/pops.js";
}
}
];
}
},
{
fileName: "测试文件.apk",
fileSize: 30125682,
fileType: "apk",
createTime: 1702036410440,
latestTime: 1702039410440,
isFolder: false,
index: 1,
// @ts-ignore
clickEvent() {
console.log("下载文件：", this.fileName);
return "https://update.greasyfork.org/scripts/456485/pops.js";
}
}
],
btn: {
merge: false,
mergeReverse: false,
reverse: false,
position: "flex-end",
ok: {
enable: true,
size: void 0,
icon: void 0,
rightIcon: false,
iconIsLoading: false,
text: "确定",
type: "primary",
callback(detail) {
detail.close();
}
},
cancel: {
enable: true,
size: void 0,
icon: void 0,
rightIcon: false,
iconIsLoading: false,
text: "关闭",
type: "default",
callback(detail) {
detail.close();
}
},
other: {
enable: false,
size: void 0,
icon: void 0,
rightIcon: false,
iconIsLoading: false,
text: "其它按钮",
type: "default",
callback(detail) {
detail.close();
}
},
close: {
enable: true,
callback(detail) {
detail.close();
}
}
},
useShadowRoot: true,
class: "",
only: false,
width: "500px",
height: "400px",
position: "center",
animation: "pops-anim-fadein-zoom",
zIndex: 1e4,
mask: {
enable: false,
clickEvent: {
toClose: false,
toHide: false
},
clickCallBack: null
},
drag: false,
dragLimit: true,
dragExtraDistance: 3,
dragMoveCallBack() {
},
dragEndCallBack() {
},
forbiddenScroll: false,
style: null,
beforeAppendToPageCallBack() {
}
};
};
const Folder_ICON = {
folder: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABRUExURUxpcf++Hv/ZU//OPv/DL/+9Gv/BI/+4Bf+4Ef/XcP/LOP/TSf/RRP/WTv/JM/+3Ef+9Ff/bhf+5BP/DJf+yDv/imv/kqv/bXP/w0v/fd//calQXUgwAAAAKdFJOUwB///8d3L9enl8sr20gAAACN0lEQVRYw+2Y65abIBRGE1EzVbyNSW18/wctHA6XYw4q9Ee7Vt2AgOHbcVyTOMztdnFxcXFMWf7gKHN190VRKDpFC0iNqB5ZvqpXzJRxHoF7hrAa9/hK9j2oYIA2QA/UqXeyNg5QDBrshhHbUH8xxO+uT7sOJ/tU5a4wh0eK8KmKHTxd28Bfo16pqphep5l6I+R/p8xr668kVghVceH8M5EZYnGhnBKRceGqmaZXPPw2xbO+1xU+8axwe8NfzkIV7xVZdF0AVhi+rWdxIfgmwloE6CkrDCPwJbYUeFgK61icxFcNKyxIxE+WgnllQ0y4+HffzZ8WZtJlCDtz+CzqaaFaVGiWBNEOZZ15zihsT2CFnXk4QStsLohTU3FC+Af8I8JWV1fa1jy8u+hnOUy2vnd5SkeGrJBfHZwDbxe87pfxQvejmMZZYxxdYSoyVyixSvtXFLJ7hWq5xCRNSTozczzHCj8T54kI5d8QCtvZAodDIa7DgRkJaII2hBfaJC7EOE7D076XuIoVBu8oN3kpBLVt4YXBVaUSFSbS5Akb00znSoPn9KCJCN0am7SnGhganC4kKhR2MV0vvEn4M7bFhM3GIZqtgfiPr9BdSAYnrnCX3rQeB/2xsKcHouiBBhpO+phQL9CdjmKqsRkXpkMz57dmfTY1v3k8is26zvN2A6yIbKVqm/tMjFBMp5jpxrWKbsB1dJw/AsC3Lt/YEaK7x1t5r7aLj3ned/fRj1TK3H9wXFxc/F/8BgM0jBZ4nc19AAAAAElFTkSuQmCC",
zip: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAFQUExURUxpcYHaOWDM+pryU4TbPXLU/XHT/X3Y/nrZpIffP/+gI4La/+9QTvhycXjQL4fbQvBUUoXaQHrSMf+cJPl2dfBXVf+KMDu99IveRv+ZJf+NLv+PLIncRPdvbV7L+VnJ+P/u5HDS/P+DD1PG93fV/U3D9kTB9WfP+2vR/GLN+nvSM86bL33UNf/69f/+/XzTNP+vVf/iyf/06sOCRsGhYP2Jh/t8e4TVPX3QNat7jnzCMfxfXXrUMP/UqJPoTX/cM/aDLOVjKP/jw/9yC/98HP+GLP/Ec2C63f+iQ4TjNvOiasmpZLuTpfaQgfjEu4HGOPKGeHDC4s2YXU+02/Ozn/B0J+1oYHvSNGnM9P/r291KSNGeZIHGObeOn5zzVM6PHkS978mNUt+EO/GadPOgbZzyVJvyVNG6g66AksCer4LGOc7Mp/eWh/SZVu6adP6VKOSF/TkAAAAKdFJOUwDf39+Af5/9MKAONWYwAAADB0lEQVRYw+3Y+U/TYBjAcUDYIahlA3bCimM3Y64MERWdeExFOhDoxkTnDuTm///R9+jx9MjbtcT4S78sIVnCh+c9mjDGxry8vLz+TwGffxp2/Ql0vYJbJuXzE76AvTc1rc9//gx0vqxg+XwON+XY8+8+BO22NayQKxQKSzZiwMj5D/TgQZtORjASe9U+QKHQfplAilEuhfIxQT/g6P4bwEZbGS1FS08wQR1GzpOCYfSFX7XGEtDSJPaEQCPH2cagwmEwpdfSmQwbXIEaOlAMhsNkRvQ9jEANy9CYoA7Dt6PdqIVBtUY6rdOy2SwbVLEcvR5G8DCjWkSzA3VPAbkcJlCHZbORCBPUY+h+pKzArKZF7MAcvLf4PDUwRsDfikU1O9DwFKDzPKzFYjGMkW8yGIExQbpO9SlAB0BANQxGDDFBdbS0ctdMYMQReHn5Te0n6aIPwf7WBWoLdsEEN57PoR6RFnGSVIdgfV6J47gZHPdqVBBzG6IobutCb+w5B+dkcE5Ys0iQZJBzPOENAsvG1oQ910u+EcplvroDqvLlsrDveEJlyXvox8Xbz6BbEf2KfdcTIlA4On4KOj4SNJBzAQpmUHAxobrkE4E3gyf7YECHE1qAPAWd7+EiAXleHMI/RYYiz5/c41AQaO4+YNXKq7oHpe2dqqmd7XnXhyJJg8Hd8CtoeDcYSDPuwflOp/NOF3qjwzm42Oc/SN/ler3eer8O6q+b6jHBszfRaDSZTD7BzaI2m6UEqPTyxWqrUiwWQ6HQY9zrt1+Y4B8ZTDLASoV4o4G/EJiMat7s5un9QDKhDBLSPGGl4mTJeA+T8pLphFeleCIeTyTwK04mJJvofg9PS3GQMqGjPdSfsjVYdA82jSA6lJa7CWdNEy6QCVedLPnMYg8XQHTJFecTwottAJ3dwwcWSzaBrRY8lHEmGJQvtjbhlQWomzDI/vAIn5TRlmzzkXnSvIcfQWZw0u4D86Rhyc3uB1CXgOCUbT206uA4PJRm9z2oKz/LFBwPjvAvAi8vL69/0l8fxm2XCv5p+gAAAABJRU5ErkJggg==",
mp4: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABXUExURUxpcZKU/5eZ/4SG/5CS/5eb/6Sm/4WG/5uc/6eq/4uM/4iJ/6Ci/5ye/6eo/6Ol/46P/5mb/5eY/5GS//39/5SV//X1/6Ol/+3u/+Li/3Z498/Q/7u8/zCK/WcAAAAKdFJOUwB7Pf+fHN2gn59fp7PNAAACSElEQVRYw+3Ya3OjIBQG4FqamnDzTkT9/79zOQdUzG0PJjP7YX2DeAR5EtKZTu3X15EjR46Q851dnuY7nTtd9Kv8nlK9X60/Kl60/qh4wjUFNjx8XSznIlHMClgICadC+2PWYShFvFwpSRAvBSl0MYDyVpB7xfOyLXmVrl2h99cQPw49VTzLV7lGNVF8DW5CExNAeSaCSsHdyi9SUPi2Ds2h/KY4K+epbZANpYoKmRHBGy6qbt7qnAzKaZzU86SDtje91Z8Ddd+2renHIh6sEsFKVS64stKmhRg7rRi2yrM0MEoAW2Osrh4kFaxnEPd9/SiI+94N1jW0qu5icN13Xfl7iCBqPlsQ9y3nObyJCNYr2G9Bt28VzRPBroYWQGNMiy+Dlel116WBP24BrOlcGgC9NaNWdjjV4T0/NHAJgnF6O/Fo/l2wt6Nm4i2w6OOMExtYmQ42Tdd00BxoV85O9TCI0k26hDckgc2acgXtKIeB8WabvaCFL89xZfMuKG1vgZsa2O2dRwbdUng1vBut48bK7dZ9ezgOrC/diQSWUdg0jrhb4a3bJIOCVYrDD6N8HCLol0PP2QC7fexxTgN5yctF4Mxz8wE953gDdHQwSiDQmK9Lr3IamJCcAObPl4u9oBAL4EohRESGC+FrGoiOX+E/lYD4y3kg0CRQJOSfggwbFksZZhg2GKOAGQscrFrE+RrachaC8hfsN7uLCJ24myE9BuQb52HmGcqO3fPtc2jXB3RiTuNy+hPpKcv/mmzHfzOOHDny/+YPi6+BG+WQsHsAAAAASUVORK5CYII=",
apk: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABXUExURUxpcXnGVmm8P2q8QHzIV4bNYXXDTWu8P3nFUYfNY26/RIPLXoDJWobNYXHASH3HVnXDTXnFUfT/7onPZej/2/v/+Ov+4cDypVmtLqvjjt38y57afsvyti89dh4AAAAKdFJOUwAQ3/8n3Xugn58KiJgCAAACeElEQVRYw+2Y2ZajIBBAuxuTtIhsKgTx/79zisUlaZ0pPPM048WwBa6FkpyYj4+Li4sLNNW9PqQq133W3e+4lSqr24GpPWms08S23ZhCmnvatsxYtZE4/a229BQZ78nxk27TXWKsWwwFRhA2ITXz3FBp1maxsc6OLF1Usb6cocBYNynAnKcs55tm22CNdYPl9vmXhUhj3bA8PpaMLdUNqc1qZIQggRRUi42lPIvmEzDMZazZBiHYOy9dd4TwezPXj1Pzqgxd7dpVlwnVNAzjS0SiM4N2a893mVC6MF2BsvO+64QQzTgMfadKhSIdQvFJD9p3duyNMf3khB0G44gSLCWcUKxwBhEZM2S0Af/E5TqgVKiI18MrRnKV3mRnhNy/+QbdbQIsF3oTFmr0vGJY8sjUGaGCBEcPht65UIDK2+C3UuUhaKFKSUmngen5tCE07Z+kh7bxMp9RKZRQLYg+CgmZQqk94SaUli8jyoTSx/lmsrHUvR1TqU4KuY3zddKtFVjzOSEd9S7G8UJhDEBKAp+4Hg7Itpg+C6WSKKEMgE8Se4CnaYAsEAbo8wDC5yGFQndAd1II13AfR08JOYlfg3BTTCzD3UktRwqFHJLk/DjCcBE5Wgi6BLH7xtHHuxKG4IRACJKTdhr3sISmM0r+QAgffIaS1u3uwlnIC4WckP1tuPhKhRDjHquvdMlrSdcmncvQgRLCDEpTtr6SNjX5klGkEM+/IyTxmF/bKlkLghbGrZE2SPLFFs1dZLuXMMJ71m1m0vkMdOmI71KC+QVbkQJQjyoPvA+zYnig/8L6vpDPUhUyxgfuSSr9ifH4I/cT/2ZcXFz8v/wC1sx9JR+88xQAAAAASUVORK5CYII=",
gif: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABpUExURUxpcf+ubP+eUP+iWP+xcP+nX/+lXf+SO/uPSv+dUP6kX/+XRP+VQP+SO/+jWf+oYf+hVf///f+mXf+tav+ubf+rZ/+eUP+wcP+pZP/s3P+aSf/z6P/48v/UsvqFOf+6hP/jzf/Hmv/cwS4F5mYAAAALdFJOUwDdez2foByg/p/2onNSOQAAAh5JREFUWMPtmNuSoyAQQGeMUaZUxBveRfP/H7lc1VRJptF92Kr1INqtcKqNSSrk6+vm5uYGzMPzrTzcdYFff+I7cPV91/VfNZr6ykNb6WwMypW6tOBk9EoALka/KMtCTCr05OKi0S9AwI02YXXW+KwqMVluMqw4SimjtUGNzwoK0HgobC4Yn42iat6DanfKnPZdhCAersK0KcfXWOtYbPtrTeNBhGnapCt1n2VZX6cWnjDhjjETjNeFudrhWQpfeS7PqJ5vI0DCXJLKPVmkcMH5MQ5CBaGvIRtehIhkGVp2VmgqwgixhSEkciYeDz4jxDkWyD1F0zQhKrJZ3zzG+jKPQMLNJiAd6ogImHw1+1UngQh/8DHqefMS9/ycFhJVIC+ROAvJnrodRn7ARBfIS+TJirOwEp88JsTGx0skF4Tyfd3nZCtQ+c8KG3OXW4FZ1lJHIeUQ1dVXQzY0vMDBbLJEKjsFCxX1oOmHPe02wlHYDsewk0LWW5jPCfPZJuyZm7BTbWmtzHoMTNgpcPuBUg+CCSkfSTv2wTdXskKoUFGMdhhyqlASTcjOlLgLu3iyk0QOwjDqePsFfgeiA4VqykefCUK40KZ457wwuiaMBZFokc7EQTUTiigGCWMH/m1hAhR624TETFSh7Em8Np5DfsE+EgdAy4BQD473M9+SNYPcMV/fImh9CLiWCkKYL4SvSAMv/BXvxL8ZNzc3/y9/ADVfok94AIhIAAAAAElFTkSuQmCC",
txt: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABIUExURUxpcTOL+DSL+DqO+Veb/mKl/kmX+zWL+U6a+2ao/0aW+0CS+kyZ/GCk/mWn/1yi/lef/VGc/Pr9/+jz/2+s+46//b3a/4O3/AJIojgAAAAKdFJOUwDf//8d3U+en52O09RGAAACF0lEQVRYw+2Y63ajIBCAW8ZqHC5KrZv3f9MFhpuJTQfrjz1n/SDIbT4npw2pfXu7uLi4YNOP39O367rRvOKja/V9GHOqcTTmVGNnzLlGl6A2WvvWxGsqJo9ajKMuGP0dDcbxSWTShKlGfOOoebCNRTidYxynDXrb1dUU0ziGEF3ZdHHoza14xocMXzJyhLdpmme/e6ag2XeobqYCnBRvs98fm32meId56nnCErk+czfVhlub0CyfOyzaHhTa9XOX9aDQqnU/w7uyjULrcC3i+ocI4iUOVkQ7+8IVeptXWgUgMXD3xjv1UYCyCa6QUAiC0E64fMUBYBTOrUJnROmBryCEMEAsCbYKrSIkCSXS0LYLla8U6K4KSYi+H5ZsWmcJY1ohmpos3OLWmoSF9JajX9m8ckyIRfjIrzM8KERfq5J/yridZwrDx0HF6suOMF24QoXJGijCR/gZboB/TZgDYyd9lqU8mqGPlGQMJR8OfiDjZNjDEQ5S0hlDZ4ushWkqwxSWJCgezOKYIMsw7Ri4wi0g3HfBKuF55bBQTNod1WcKw9kv6yShTQgUQA6A6IsjAEmFJ4RXOF24W+gBcIUxAaiapChi/zolw5rfC+GYUKTqG1G11Vxo2Bn6AJLk8NiPC6JBKOjXLv0ZEruwN2AJe8GCnKzHgEGw4STonm/fub535rNUx8xx4D+RdsPP9Af+m3FxcfH/8hcLt2QJ3T9wuwAAAABJRU5ErkJggg==",
exe: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAB4UExURUxpcVq2/kOv/0uw/163/1Cz/0+x/zGp/zad+0Ku/165/Tms/zWq/zKp/1i1/1W1/1K0/0Wv/0Cu/06y//7//0qx/1q2/1y3/1+3/j6p/vf7/y+o/9zu/+r2/yqM9xCa/4LK/8De/3ay/p7P/n3B/rLW/12n+xyf/0XRgzgAAAALdFJOUwDdez2eoByg/Z+vFPUOhAAAAoZJREFUWMPtmOt2mzAMgNuEBDquhhgwgWwMQt//DSfJ3BJIJ3P6a+MLviDkDxE4OaVvbzs7OztsjgfrJUdz3flH/hXvZ1Pfe55/q9HK8iyDluOW4xz3cHcYzIxnMqSZNi3BuJHxALIsTXHLsB+nuOlzmRktbUl71RIKGhitNA3gMxEM3TgxM1rog2UB0vcoopAezIxWwIRrPM0XhX17jJgZT+ETwWwSPBzgGRfCL7C4wojSI91FEfVDJBo2hPNLcYqeCKmFs71pcuAJw0cbkCRREq1wMq4wQVnQNkAbJtuESYKWiAbUtXVVENU9p1iiT4NzrjChRQnNmqK4DBSNDuoj0NjCkbScdGgsUzlXmgplWl4eKcpkZjQVSnHv6yuqapjdhZycLKGUkI+bFK22VOW9ae79xRe5NkInWcIPSOxR5IC7292ArqYqi1qNCfKDIxyzRV7pp8W53RxstX56oMRNQqEaEpTdzVGAc+tKCjRqNLIuWYpBWOsCwScAMOoSaxIKdoWCkEI4dYm06JNkbClQO32KFAZCIWLnN9GBUOoSOwq0TjzkGAnxGhFHxU8B/RUYC2PlEGpcrobIxgpjpYmfI1OAJ4zjWOCaWN+UBTUdxyyeMB5wq8sqlTummAn9V0Jvs7BYpfS3CstqlQ1CRdnX9tcqraFQwcNB98T7/LnKp0cJ+PywhG7s9vjXVXxXp0DHE7qT0lXuK+gIR2g/ydSjV01zZSR8Xdoc26jCbxN6rut5HuZTR/s0eH03xVlCz4B/Q3hYWefDxxua7/s6CAPnL9ijv8DzX8F6DbB9Npwrhvdb5wq5V4bPYb5Lne3lrwKcYDG1+W+k54P9Vw4b/puxs7Pz//IHkvGjBU3hWj4AAAAASUVORK5CYII=",
qm: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAA2UExURUxpcdbc4MzO1dTZ3dTZ3s/T2c/T083Q1tXb4NDX287R19HV2+zv8PX29/3+/uPn6b3CzcTI0ZN/xtQAAAAKdFJOUwD////dexCfoCcDaycKAAACJElEQVRYw+2Y4XaDIAyFF2gnEizy/i87SJCCa13i9m9eLAQlHxfsOdZ+fFy6dOmSWPPdvdM063GfDo500yLnG8CfEh3AnxLnQ5bVE+810XYAu4dqiK7m2wH8C4+OKbahcsSfVnQeHTSLjLLNsW0boCE6u5nYbNrNFwe1a6VEVzM3hrUjic5Qc/uUOnyqslsHhosyoutYe/Zek9rhT5oVQNzl4qv4Lgbi92QsIY5UJwRiPUoO5gpiFmDDtsbpHCIXCMsjawnAE2AzjEIgki2kFMRIOEJGLDjEOpPM4UQZvOIiaLxMBKxnGSoEjgqPTmF38QQQHoOgu2RlQDcC4wiMv3XowwgMfrg86YDl+5dvCR/lnjyWJUQ4DczfPxaRngpwDhiZ9UpwCrgcCFRATyUeAaNXOfQFGN7jwkI3O48SAb2n6cNChY7abJ1cW08SLrnIUvZGCT2yVLQKL3aYZcKhvMIhD03xiBeTHugPiNHqgWaFGN6UCKtRA31a6UkSC4BrDsrTZU3KPSzzm7QafjjFWtcJIK3J6IA8PBNJaatrf914xsiBI3KnZGiAkTrcllMcmJfiLREDeXbDKYbrSqDQdD3xXa5J1HLsa98/O164h93Kvke7Uzrguy3spASafwK8a4CSX7BzGZj6rLSL66c0oleVyfRJyYyInipacX6hvzVbae8ymX4G6bvUPA0rTa+WTv5kb1L8J8b0o+4n/s24dOnS/9UX8vFAaEzio+4AAAAASUVORK5CYII=",
php: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcTbUrDrbszvetTXYrDnasjXQqTPIojfTrDvftTTMpjPKpDnZsTPIozXOqDjXrzHGoTbRqjfUre7/++T++Pf//SfCmxm3j1fXt7Hx4UvNrNL78XHfw8T26o3o0eeFKfsAAAAKdFJOUwA9//8c3Xign5/8SMcgAAADDklEQVRYw+2Y65qjIAyGp9ppRxBERcTj/V/mJsHTtN3dMNt/66dAEsjbgE/7jPPxcerUqVNsXW7Zb3WJx12z9E/6vMbyPtP0rcQsTd9KvKbpe4k3SkneR8wWVrL0yb8SM2QkQYGZYEsITnckMUteKX2KsImvgS/EJT4B86XtXhwx2xD5kp3nCwVHaHTnbOJXsuWv2Utd+WOJ+RcLmJOSpREw30T01U7yCx9Y0H0g+W6YIZRsYRxvfODGK/KiQHtqGjsePwU/MmMCi+84GArfgEZ0izBHHecQvzAFQaGyMBTFDDzbV2iuYWhcYBEgB1Ww42Yw1fdoDHDR3I00JhaAs1ndOCCUUS2lzLa2HgNj3TT1OIKLxIruiAorFPQz1GU9muEIx+CHeRxYQFwaUih/dmCVeISTMx1EBl9t4gKD/FAjz6AJoHp2znV1U0/+Z0A/1XXdOaex1hrYvRBtT8H8J8AcUyflBO64A3sQZSmJaOdIYInXDAzbtxIdPVCxYJoWnjQ86hhgCXkgKsoYNEsPkHo0OGN6/KAZglg5E4gSdIRTT/CRqhXEhmJt1+uwKgYYTmvqwdahWr3zXDxQOyDCF2NKwEHK7IhnkdeqMhqIRD9Za6cKjhC/cnCE/cIzOgqo6SrFQhz1DP0gZElG4C1rmEAQVKiR2A1dLzos1AmtyQWepjUgFlBvAqLyvYONWjhC9HuvWiTrCOB9X66la9vWjMCzHurSBlwndTRQaIFVQJPGGUFHqJBD7r4BLbhbFmsGkiUeYbdsFPxwhTV3ToVrfQKToZlxGqbRoRlmwhTNsYFbCsg4P3rY6pNgngWUa4IMjZ6MO0TlNssDEoS6BaLgl1qtrkTRiEt4wJAm9pKUXIuSa30xFUqp5IPEY0CqEOIB1Yo8cNSjFRZxgUrReuzRRlfto5ShgVjALU+9lDyabCBXHOBtW20eLBOaMSaM4HL+gr1gmtlBmG82NjrrHFys14A7MgizGQepbQpuzo7xBfw74lnrNPdd6no3LN35b6TX2/2vuv3gvxmnTp36f/ULf0R1znQ7804AAAAASUVORK5CYII=",
pdf: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABUUExURUxpcf9zfP9ldv98gP92fP9+gf9we/9md/9yfP9/gv9/gf93fv90ff9od/9ref9ve/9ldv/x8f/q6v/8/PlYaP/g4f6lq/63vP2Ejv6Um/7Iy//S1LO+3cAAAAAKdFJOUwA93/8c3Xugn58XiwqYAAACVklEQVRYw+2Y23KjMAxAmzolxXc7tYHw//+5kmxI2tBWMDx0ZjkhMr6dkWoeSl5eDg4ODticmvZbTut151b+xNt5re9Nyl2NrZS7Gs9S7mts5M7GVu5sJKH4KhDbjS1shu2CKA36yj2ZaZ5vbGdNbT9zH+MaW8GFaeQLmcYF4XAbu37J2HKFiparyReu12ta+oOKEztDVXwKP+mKdKV3H8a7ZkWGqmxWihIEoVLT+FyA4tTc4g68VI39LHyGI3yva0WVKl1KzroOimkOvu8rhJNWmY6Eg17IcL0QcFRzkGovofZYc/C7ZahNBuHNbs+wpHKPrscH2yqt4YIBbGlOc4WPYK8rp/w4WhexhPoJem6SeJ7YKMRTDteQdxN2odDvIXRwpRBSjhD6rUJXL/xoPUBynRohjkL0Geh1nWILYblzk/cWQhx0DymGFDFCvqSDFSyhc64YCzKisBvDA1HqsoAvLBmil44khk/EXNesEhIiF1eMMaVaMWa8UahyimRLacy98xmdwM3ZTcKhbE+pG9xHIY+QaOf9JmFGW4hpIJU31npsMZgtJZMP60MJ2GDIGl/cbo3QAs5aUeqNqfe2DtVgax86bCFQE0wZ6lvSERzhpW6hE0np5r198sysEBqL5wm+D/sDlxUZep+73MMJ7CQs5/mLjys0pqSIj4uh8mdM7dTIE8KmCZLXW1MnHma5Qj4sofnrwmZhn3+I0Ph5gvMf7Am2ELjX0z21ZKozJUDDeg24eDaciuH99pXre2W+S52ZOV74b6Tn5vIrzYZfMw4ODv5f/gEm33Cvx+zPHgAAAABJRU5ErkJggg==",
Null: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAA2UExURUxpcdbc4MzO1dTZ3dTZ3s/T2c/T083Q1tXb4NDX287R19HV2+zv8PX29/3+/uPn6b3CzcTI0ZN/xtQAAAAKdFJOUwD////dexCfoCcDaycKAAACJElEQVRYw+2Y4XaDIAyFF2gnEizy/i87SJCCa13i9m9eLAQlHxfsOdZ+fFy6dOmSWPPdvdM063GfDo500yLnG8CfEh3AnxLnQ5bVE+810XYAu4dqiK7m2wH8C4+OKbahcsSfVnQeHTSLjLLNsW0boCE6u5nYbNrNFwe1a6VEVzM3hrUjic5Qc/uUOnyqslsHhosyoutYe/Zek9rhT5oVQNzl4qv4Lgbi92QsIY5UJwRiPUoO5gpiFmDDtsbpHCIXCMsjawnAE2AzjEIgki2kFMRIOEJGLDjEOpPM4UQZvOIiaLxMBKxnGSoEjgqPTmF38QQQHoOgu2RlQDcC4wiMv3XowwgMfrg86YDl+5dvCR/lnjyWJUQ4DczfPxaRngpwDhiZ9UpwCrgcCFRATyUeAaNXOfQFGN7jwkI3O48SAb2n6cNChY7abJ1cW08SLrnIUvZGCT2yVLQKL3aYZcKhvMIhD03xiBeTHugPiNHqgWaFGN6UCKtRA31a6UkSC4BrDsrTZU3KPSzzm7QafjjFWtcJIK3J6IA8PBNJaatrf914xsiBI3KnZGiAkTrcllMcmJfiLREDeXbDKYbrSqDQdD3xXa5J1HLsa98/O164h93Kvke7Uzrguy3spASafwK8a4CSX7BzGZj6rLSL66c0oleVyfRJyYyInipacX6hvzVbae8ymX4G6bvUPA0rTa+WTv5kb1L8J8b0o+4n/s24dOnS/9UX8vFAaEzio+4AAAAASUVORK5CYII=",
ipa: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABUUExURUxpcUOv/zar/1K0/1Cz/0+x/1q2/jGp/0Ku/163/zGp/1a1/zus/1q2/02y/0ew/0Gu//f8/164/+/4/+f1/9fu/yek/73j/6TY/xad/43O/3nG/21bnhoAAAAKdFJOUwB7//+gJ92gn59E+c9oAAACbUlEQVRYw+2Y27aqIBRAd5iVsLiICKT//5+Hi5hmdcD2wxnjOIPF4jZdPXX5+Tk4ODjIpj41b6l3+Br5iUupsr5I+avGVB99GvcaayqpI4ioz2MWJnGl0HiiNCpfIuNeibFZ6OQ6ysdqgbGhWeQbvZDQGMjCQOYlUmZsCHFXSIoTNEWvjXu5xjNZQVOgC3Hkskv4ict+YfXa2GQJq4r4lkI1z+UoSUhj9w+p84QrSEqGvpeLaeC0QzhBTdca8bx63i+0bavGvULmG1sNUrXKIu7SxU6ZcLoV7jM2qN5ixKJwkrJMIVtRxWG0g9Z8teQpEKZbZLB2kAzf9WiNsXL9uOIKiVVd23bKDLZ3icss+UpovMWTxlYZUii8hZPcvRgfZs+MkYKFPR/YLUfI3VkP41RtfL3Ugk/brmcKw3F3YdwU2A0a0q7nnC0MmI1QUeBLbkVC4YTzKzZViS+EYLpnFOd7hOK9UO4QCi6CUsCgNkYreNp2TeQJEzCqFyWKJdlC7hvwPji6h1d1hkSVr7O0QoGNCjqlQvdDp/phT4WTcOyjxvuS+hshCKM2GATlQogd9FTign7UMD0NMoUw4S4gbZ+MvdUo7PltgDxhOu3QyARj7/Gj4RoWFFXoC0GaGacydhhsSEgoML2FYiEAvovRjuzuAPdBxe8YSiu8wpPRox0hWfvyhWgOgLHWGDnc6JLZFbJrltDfjneQv4fiEJdR3ExZlhB9BFazXxCif0aIF/ExxmQKOE94SofxQxrTqWMHig3lfIOt8Qb0dpr1U+WKs8l5xw7I9UHmb6n6+qv1xT8xrn/ltOffjIODg/+WP3HMcIG4JOLbAAAAAElFTkSuQmCC",
doc: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABIUExURUxpcTSL+DmO+VSd/k6Y/Vmg/kOT+jSL+UeW+1uh/1ig/k6a/T6R+l2i/0SU+0mX/Oz1//n8/y6G99fp/3ex/J7I/77b/4u9/gFOo+kAAAAKdFJOUwD///8n3Xugn58WcbRuAAACn0lEQVRYw+2Ya3ekIAyGCzozHQFRUPz//3RzQaSXbYPtOfthfccoCcljEM9pZ15eLl26dEms/v78q/oTvKf7SrdWZH9z7leJT+d+ldhTzQCfooH9oUw0Ee8D1qPyZXBsOxDdFuJzkKiBKAM2EIVAObEGdtlqv0SkRAB2XTfgQSMao5M/FKHpmxDYvdHO2G9S69YE/FD+5i5szxMdfq1eBDSYasiMYY8DJkcPuwuAr12uxNO2LgaHGWCM29Yhe3g7yZpfTa41xq/THJ3BNunUGZ8gMnAAs15FQBbUjHGe57W4IDfN87T44suAXUZ6WwFZCwDnZSx+S4cA1AeQnwEBp2X054DjAVxiXPclzyeAno4d6I2DwbT5/Rky0IuBnnjeH8AVrrC7PgPtniED+l0Z6D1txTwn7w8gp5wEJuLh+1KA/jRwWv2GFGwymR8CFQEH7DMmRG0ZOLYCucAyEFFx0REvWwGOcuAIgnw4qwgrRdCUVNhgMEFgQiBO4yEGkqyielB0IahEw5mBWSeBcQ1KB7fjfw5MXlmrw5rdRf8QGJegrbVqTNltBtrRVsC4agU+tLjECkhJIiA0A+koBqYBGsSI4kUD0I6cJAVSOjw12ljcEcJDi0PKQBKkSDvkfAJGeAU138PSy5iBvIYmIO1rTAu8MiUwJogYVVIkwMcBVAb+jFKDOQCL3lZ3BOyjCQhLROkKSBHVDNRQSqb28gyliOIImQioK0ExC2E5oqp5GZBrbVX3PmJ3p7nD7/TPgEpXD0oVU8XN00oGpEqsUQc5UxWb2k0EVG/F2Ix4LwnwXld+AtF1WPIfbK8aJPqq8pDzJCsG4YICV4S9NByUUFwt/C7VP7AgUBGcw0cmTQZhf/wjxuNb3c/8mnHp0qX/Vn8A5AVWOPvxckoAAAAASUVORK5CYII=",
xls: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcYXMX2m8Pmm8P3zJWYbNYXvGVGu9QHrGU4jOZITMX4fOY4HKW3fET3LBSm+/RnrGU37IV2u9QWm7P22+Q+r94PP/7dv2zfv/+GGyNlmsLsfrtaTZiLPhm5TQdN9r514AAAAKdFJOUwB/e98c3T2gn5+4KvYSAAACu0lEQVRYw+2Y63qjIBCGmzRtqhwV1Arq/V/mDgMeYtLtkM2/9ROBGWZe0aB96NvboUOHDpH1eSp+1Gc+7lKwv+njksv7YOylxIKxlxIvjL2WeGIvJhYlY1BYiRU0ZahZcqYjh1ggJCqmL8bcCVejE4tyL/awSybeA38QlXgL5PsuzyYWMYmvhfNECS3nWDCGRiw4T0lr2bjwLCOSnyjAL56hz2wg2yNuHadM4NA0vpyNCs6pa7ot8osIrGI6a76/Wx96FVZ8Asc3OmIAEVghDw7WQX47Qq8KNo+212ihjwSsFsmxjcQo1oHZdpNYIzKBVnokDmiVvgV1Q/88UPQCic0EhvZN5Cn9DDAmyb5Kt1lV8Is3TTc4k3iaDNRah/DQaOngwYWJMZgg8MYeblhrHIOWDFxl3QREmKMeuq4bVS8TLooIrDZE44bw7FpvpnGYeYvyZ6iF6cdAbCbn3J6XCxSR6JDYTb2RuzEaUKQMEbLgkH2a45A8cw0tDXgjAMve+kTc6wmgECOsPhGJ7BXA8D43ggdi05X/DsTvQ8Nc6fFN4c8AJRyhBOEXsPXKwAJHYnimOChzZihThmRxUVe9hAWORB8vJCOXBJSAk1E8vMiN186KhTjKTQAFeMVwgVn43HzpDFgKliMShwQTdOCsMgC6CXkr0as1IhMoPHxhht4kgnXKw1+9wa4R1yygMnoYJ9cvM6qdHMfB1PnAhDAufGHU5gpgoiP6FA2oIFBFGUi30UQIOmqFXaXIwK2supW1N5584C8iAu+mdW+kmga04caCQpqdLWXTwDwaeiSgzRAVWGNZzrVb12tTk4E1CKuUbdGyyZWGoijAc30nu1xhrzNl8/0o0dSPRdoGXGuTVMezNvVibioQ5Y5hf/u+JPygefiduJe6XA1JV/qO9HK+/qrzE//NOHTo0P+rP7x4jQVHYv00AAAAAElFTkSuQmCC",
ppt: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAByUExURUxpcf+ubP+iWP+SO/+nX/+lXfyPQv+SO/+dUP+xcP+ua/+VQP+jWf+XRP+cS/+eT/+UPf+ZSP+gVP+qZf+saP+SOv+mXv+wcP+ta/+ubf+oYv/79//x5f/m0vmEO//MpP/Sr/+9i//Zu/7Dl/ufY/2zfqeIp1YAAAALdFJOUwDdPXugHPygn596VuVMqAAAAl1JREFUWMPtmOtyqjAQgNuqUBQSEi9cDHJR3v8Vzy5JJHi03dAz0x+HD3LZTfIZ6tCZ+Pa2sLCwQOZjG73kw1+3ibKveN/4+t6z7J8a7f6Kp7bC27gp7mTFC7yM28nS/OfGKC9y0OSIafJi6A1FJ3IPY5SToBuj/JAfDkMxNSzHzpDN9e1jXB+IUI1/CfemjJGfcb0HDvbe23rvZGxMM673dCKqsJwsK+916SYQyn+KdemQVec7qmqy8oGtr7A5T6kfhGsP4QlLd/7aSBKeRuJueFSNUmi8nspxfJ6wuWn6Gv+gleM7neYI1fViucIeVTtLGOv5slMg5FITXGCLqo6dCTRhfIoRqLVQ2lA0Sqkujk0MGZLQrEZAqKwQ4ChspDOBIvyMR2QzEUr4plXNnQmfnkI+FbYQVf0coTRlFGZt22KgOm78UlKFckQL4VuulaHqA2dczhFWICwro6uuAfuJkDXVIJSNfvu69jLZIFnIXWHLZXKrkf52Cbi/kHOORmg4q2FbLePMvnwJw5HhA3GcU4UWK+QiQATjD/gKhRW+4idCePCZQjaihQK7nLnYyFeYjMKnPjZnh90TIfMSCsG0QrDk2lVdD5EQOoE9HDYTBE2IizRJ33RNkYgJzOkTdzgKg6zNggeh8BSGxqWF8HYEj5bkXtGEiUsa7IYWDM8IvYXf8GvCHZLglZgIG33ZLvZ2JOHOg98Vpvc2HQOHNKUJV6kHK8rh+8m64ysh6RgQpsdjaq7hhmK6OmeGIU95YjjfBkciAfEstQlpvpB+It2swm9Zzfg1Y2Fh4f/lD1FNqKcd3wCLAAAAAElFTkSuQmCC",
png: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABpUExURUxpcf+ubP+eUP+iWP+xcP+nX/+lXf+SO/uPSv+dUP6kX/+XRP+VQP+SO/+jWf+oYf+hVf///f+mXf+tav+ubf+rZ/+eUP+wcP+pZP/s3P+aSf/z6P/48v/UsvqFOf+6hP/jzf/Hmv/cwS4F5mYAAAALdFJOUwDdez2foByg/p/2onNSOQAAAh5JREFUWMPtmNuSoyAQQGeMUaZUxBveRfP/H7lc1VRJptF92Kr1INqtcKqNSSrk6+vm5uYGzMPzrTzcdYFff+I7cPV91/VfNZr6ykNb6WwMypW6tOBk9EoALka/KMtCTCr05OKi0S9AwI02YXXW+KwqMVluMqw4SimjtUGNzwoK0HgobC4Yn42iat6DanfKnPZdhCAersK0KcfXWOtYbPtrTeNBhGnapCt1n2VZX6cWnjDhjjETjNeFudrhWQpfeS7PqJ5vI0DCXJLKPVmkcMH5MQ5CBaGvIRtehIhkGVp2VmgqwgixhSEkciYeDz4jxDkWyD1F0zQhKrJZ3zzG+jKPQMLNJiAd6ogImHw1+1UngQh/8DHqefMS9/ycFhJVIC+ROAvJnrodRn7ARBfIS+TJirOwEp88JsTGx0skF4Tyfd3nZCtQ+c8KG3OXW4FZ1lJHIeUQ1dVXQzY0vMDBbLJEKjsFCxX1oOmHPe02wlHYDsewk0LWW5jPCfPZJuyZm7BTbWmtzHoMTNgpcPuBUg+CCSkfSTv2wTdXskKoUFGMdhhyqlASTcjOlLgLu3iyk0QOwjDqePsFfgeiA4VqykefCUK40KZ457wwuiaMBZFokc7EQTUTiigGCWMH/m1hAhR624TETFSh7Em8Np5DfsE+EgdAy4BQD473M9+SNYPcMV/fImh9CLiWCkKYL4SvSAMv/BXvxL8ZNzc3/y9/ADVfok94AIhIAAAAAElFTkSuQmCC",
html: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcTbUrDrbszvetTXYrDnasjXQqTPIojfTrDvftTTMpjPKpDnZsTPIozXOqDjXrzHGoTbRqjfUre7/++T++Pf//SfCmxm3j1fXt7Hx4UvNrNL78XHfw8T26o3o0eeFKfsAAAAKdFJOUwA9//8c3Xign5/8SMcgAAADDklEQVRYw+2Y65qjIAyGp9ppRxBERcTj/V/mJsHTtN3dMNt/66dAEsjbgE/7jPPxcerUqVNsXW7Zb3WJx12z9E/6vMbyPtP0rcQsTd9KvKbpe4k3SkneR8wWVrL0yb8SM2QkQYGZYEsITnckMUteKX2KsImvgS/EJT4B86XtXhwx2xD5kp3nCwVHaHTnbOJXsuWv2Utd+WOJ+RcLmJOSpREw30T01U7yCx9Y0H0g+W6YIZRsYRxvfODGK/KiQHtqGjsePwU/MmMCi+84GArfgEZ0izBHHecQvzAFQaGyMBTFDDzbV2iuYWhcYBEgB1Ww42Yw1fdoDHDR3I00JhaAs1ndOCCUUS2lzLa2HgNj3TT1OIKLxIruiAorFPQz1GU9muEIx+CHeRxYQFwaUih/dmCVeISTMx1EBl9t4gKD/FAjz6AJoHp2znV1U0/+Z0A/1XXdOaex1hrYvRBtT8H8J8AcUyflBO64A3sQZSmJaOdIYInXDAzbtxIdPVCxYJoWnjQ86hhgCXkgKsoYNEsPkHo0OGN6/KAZglg5E4gSdIRTT/CRqhXEhmJt1+uwKgYYTmvqwdahWr3zXDxQOyDCF2NKwEHK7IhnkdeqMhqIRD9Za6cKjhC/cnCE/cIzOgqo6SrFQhz1DP0gZElG4C1rmEAQVKiR2A1dLzos1AmtyQWepjUgFlBvAqLyvYONWjhC9HuvWiTrCOB9X66la9vWjMCzHurSBlwndTRQaIFVQJPGGUFHqJBD7r4BLbhbFmsGkiUeYbdsFPxwhTV3ToVrfQKToZlxGqbRoRlmwhTNsYFbCsg4P3rY6pNgngWUa4IMjZ6MO0TlNssDEoS6BaLgl1qtrkTRiEt4wJAm9pKUXIuSa30xFUqp5IPEY0CqEOIB1Yo8cNSjFRZxgUrReuzRRlfto5ShgVjALU+9lDyabCBXHOBtW20eLBOaMSaM4HL+gr1gmtlBmG82NjrrHFys14A7MgizGQepbQpuzo7xBfw74lnrNPdd6no3LN35b6TX2/2vuv3gvxmnTp36f/ULf0R1znQ7804AAAAASUVORK5CYII=",
js: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABpUExURUxpcUOv/0uw/zar/0+x/0Gj/Fq2/jOp/0ew/123/zKp/1S0/zqs/1Gz/123/02y/1i2/kWv/0mx/0Ct/1y1/vb7/1i2//7//zel+zOe+e32/9zt/5nN/ieV9oDG/avZ/83m/77h/2S6/HhIljsAAAAKdFJOUwB7Pf8c+92gn59dd850AAAC8klEQVRYw+3Yi3KjIBQG4CbGpgaMNyQIiJf3f8g9B8Rqp9mCszO7M5u/Kgj6iRrb2Le3V1555ZXgnE/Z05zjuUt2/13eL7He+/0+457zlpk/i1jRjo/ZCQC2Hx6LH+MF92EOhIJt9LtviRJPFsMgY0vPr2aUmDmFlY5i68q2ZBFiVpYcf3jpwjnDFoZ15mZsChczRKxkC86Xlc+4erCY+T34TvENnPuxh4rZdiR8M0BeLlfCwcFiRqxGcOJYJxB3AEJ4STiuEuzhYWJGvqYkz5IdA58FDnQ+AOb5bOY8/948BYAfFoEJZ6gWWraK5S5kaffLkHP+yPepxsejHep9I1nKj3iwThWAOi3y7xIIbnYuPOiHCH0Fzm6jIBC2LZZ9IJUHi2JpsYsocJeqW8Fv8g+AtQcrEOuDYF3Xbl8oNmBtJiXlONxtb23nILDepfEgmdr2AdVWGduBxz0Cpp1qARTVAFwrJSwVX3vjwapZwEI+HnLSelKtNHFgZYNYBROCLYB3BLu+F2YYWGW7YItgsK58PJjjpTRCdL0QYu2NGOFXMJ3wGqrBFEI0fwIUbJT2Jkv96R0AGw/SjuhR2Q+OjgWbBqHakAZCEZRaNKLrajPgMOUM/bBFEw5CcngqNJQilwAaATTckG6GS9kOjU8QaLekGh2dixnPWDHBBk0o3GRzEBRGoQgBTw6dgAdPDXda2D8INBqE09Mo2siRdWKQ9smDRw/GSw+MsOv0KG3UxPoOnmV7i/GzqLsVvAaPkMJTxvQ0juOgU/AoHGBSSqpxgseFokgDwSsFjuIt7fsUvlqmPXo0gWduNsbMokcPN4FFGOgCJ927oOcPsa65xIA0ARIjbsnSkMDvBZHQo+AC7ISdFgwmid8xwfqmZjtcxdWDwGQNXebniQR/zl8Eb3Za8rV2s/MtEDwlN4hdLFkbkm2LXQn5Bnu+hQbIoNeAa7B4CzljeL9NQ7008F3qEjjGa/gb6eV0/TGnA//NeOWVV/7f/AJAsosfySCrjgAAAABJRU5ErkJggg==",
css: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABaUExURUxpcXvGVGm8P3zGVXzJWYbNYXbDTWu8QHnFUofNZITMX3zHVXTCS22+Q3jEUIHKW4jOZGq9QHDAR////mi6PvP97pbRd/v++tXwx+b33afbjV2vMrznpsnquGjfsnAAAAAKdFJOUwA936wc3Xign58XA1ZcAAACuUlEQVRYw+2Y2XbjIAyGm540qc1qAl7j93/NkQTEdJsKtxdzzvg3iSVAH8JRFufp6dChQ4fYOl2aL3Wqx50b+ze9nGt5L9b+KrGx9leJZ4ppv2C11KqIlxTUUnib6akn2TXEBigY3RKtJdncgRb1VBCb9o0Ikq0Hvob4Dvil2EQukE18CzSfmlXEJoaaTDCtMYmFZ2Oo0SCP2BiTgrZWdNGjjUjTsIEP2TvIRrsv7KRTJbDtpwCaKEkb7b4EXhjA1zJgHG63YYiQfhrQG8vxVz5QECMAYRrv5Oj7OAEx9MUEJlCkJhA49cJLjJZe9BMChcnju4DjsihtBEgtC1wCAAph4sEDik0EVJpsYGqVgVk1QJOBMjkgHYFGxGbErgzl5uufZPgZUBJQ7wbqeYC6ewcc5t1AM0PdDfcMBI5coRCn2USPD9QUYMcAvGmW6FC8lj0uEcYWHc0F6igxwwW8DasjJ/ZJhynewpzmaDYQAbhh3LEuRHuGrHWaVJOh1PcplNmgMOsw3p2szRCB3vf4oq7ybYLD2HuvdwC18wvUIZRNAaSyWbyrBErasZaKCttFj9agwu6kTBeFCZQQgA2qJAJpAVQEYoeMs1hAuSkCNz8Ciwk7gMOofgi8FvHx83DrUONtV4auBIbZJldYKsPe1QJdIjpn4TtkCGHUDnvGEPCzwbo0DBOunC3jRJJ0ag30VrPo2onex6tym3jAjHPOt+sEWuMS0bY+DspaIEotvp/n2SDDeQFmr5a9GZL8QurQ7qLtdwEfQcqDusJWJY8LVBClElahMj06xRALqB5y6jtVAtU/Duw+I3TpGQ9oHOAF5r6TSo8PHYrzC/bUcQVI1m3AFSd7FpKzY7i/fQaaj0Sf0dsCNOLpeGbeS52vnY/K52R3yeji6cq/Iz1frt/qsuPfjEOHDv2/+gP0toi4gXoofgAAAABJRU5ErkJggg==",
epub: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcXXDTXvGVGm8P33HVnzJWYbNYWm7PYjOZXPBSmu8QG6/RXPBSoHKW4TMX37IV3nFUYbNYonOZOv+4fX/7/z/+1utMK3gkuL412O1OFOpJ7ripNf4xXK6TKHWhX88Tv4AAAAKdFJOUwB7Pd+gHN2gn59lNj8pAAACeklEQVRYw+3Y2XaqMBQG4GK10gxCgDII8v6P2T0kMhR7dujl4QcMCcm3Ni7tkr69HTly5Ig4pyR9mVM8d0mL3/JxifU+Xkhup5jyQudmkpuNuEjx4ii0fHlWUIt7lJiwsZVpOEZMnSQRYnpzsGH8WmyphxdcGJaL6U0WsSgFxeIStOtTGy2eeZGddmu9gq21tNMcmXi21i+adtsMQ8MdOm5M2lQMrtKUVVU2GxdO+8Cm/IJsickukL1N8SwEM9wzS2cZeVXlRT9uuZGBmfey7OmVfU9Nk3HoKhwiMFuEvaaum4XoEw8G736ve7rr8W8gfF64PqXqrsX3sv8TSF4Lns5zPWKF7ZjvAHPcYZt5jFft2Bm+RpsYpCBRVegpxqEz1p3BSzQHDhFI2JPg+3162LGjYy4CRKKt8AuM9c086BRDC+8kJwI0AxDVsPYMeNAZIsBPD/ZYYfsAIh/beX34l6c30aDOeyxrKHyB8/rKPtPxYP3AGksQDbxrw8J71FGggS033T2IpstHu/Du+OHBaZ+yClei6+7wVf7pQWSgMQYPTWJZloPt6g48N0CnJY9n5EYEhsn5JN40jJBXes+TQjBkEp33qD7ttXhwLi69kFhwJm568eAkbnpScL5IPcXJ09EVatq4CSJ5ylvabyKQpkKoEC/Cb5vg8bjhCTJQMxeCd62KQqG3jhA0k0ivCr973gvXTAz4I6qr6436ZOBVb4lqi9P6KgSV5vXzVz8YXvlEDoZlrE2KmholrVC9iN4Yk4AJLdW0XqvQeO454HXJL9iTiojoMeAq9yR3DM+371LvXfgsdRHWeJU/kV6S6z+T7PhvxpEjR/7ffAMGOojXQYbbiwAAAABJRU5ErkJggg==",
psd: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABdUExURUxpcUOv/0uw/zer/123/0+x/1q2/jOp/zSm+Uew/zKp/zys/1O0/1e1/0Ku/0+z/1q2/0mx//7//164/vf8/9vw/+r2/yie86HX/sno/7Dd/5TR/W6//H/H/Eyv911ykpAAAAAKdFJOUwB7Pf+fHN2g/p8jQekrAAACx0lEQVRYw+2Y7WKrIAyG12JXJn4xEQG193+ZJwnYOdedE7r9O74qBQyPARNb+/Jy6NChQ2ydT8W3OufjLkX/N71ecnmvff+rxC/+dT8jXnB8162sLhK7T/As4glgHR1xT0Vs0iW6PGKxYXxo35FBJGC9B37p4BOLdXhd42e9QdaxXecRi5opLpEN5BITsKL9oao8YkGoqkpIrJAIRY2azuFR8IB31bvPXQuY5zzgA8hOJwbwbTWevY3yof+GV3Hm/NZG29ab9yhjrOsq6E57C2Ub9zcWMEoP7x8yvqPOalOicoANAu0AsuCqce0j5QJNmPt+cQMQ7fwzoI7AaURNdueizgRq3CJQKiXl6GH2Xn/QyIAN1BqsdQS6BmvSAXDQO6ERF6hX4BSrAYGNnp3HqJw1eYhlDlCRh1TtcA2DmixFJkTl3ct8IE65whC3S49YSzG0PAt8H1wIAaPGeFxI46cJmiY8DYS0M4YyZZawkGaGIJpDmJs8YANbAqZk9ouUOPFwgyAapWySEQvYRBHQrI+bUSoKb+unVkoVTXTDA9LFCWiG4JxbejnKppG0mHiTa4JpKHM9TKk3Iq+RcvKDoRvUJptngBJFU1RyvM3BU14/AxQEVI1aByNxHG/OYtb8ALiqcq5SAlYTgW0+UO2BkHjWzbqZTPRQsYEwS4Xzi0BFY2Gb4R5jFGEawlMNjOAcDxgFgWzspO6S0xC/tYwNcJsQp9Q1B7h4COgNEHLOD9YO3kUeigO8rgB5629SbYljvSzLfBtH8QxQYJBsgfhdEKP8zssCAlEKsQViD4V5arGBQgmBKEGVeNBwkZpCxS4hWECRoWyg+m3gb3lYRvPyXpapsjlRZnlYpm2tf7pEmcqSBzyVDyUe9nJ+wZ73gx+jolivAdeSLc6M4f1WcnmS+S51Yfp45b+RXk7Xf+r0xL8Zhw4d+n/1B13vfAhtdKi2AAAAAElFTkSuQmCC",
dwg: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAMAAAC5zwKfAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABaUExURUxpcXvGVIbNYXvHVHzJWYbNYXbDTWu9QHrGU4jOZHLBSW+/RYDJWmy+QoXMYHzHVYjOZHfET2m7P4LLXf3/+/T+7u3+5MXrsaXbiVyuMZjUeNb2xOP81bPjmuZ7vy0AAAAKdFJOUwA9z1wc33ign591Bg7OAAACdUlEQVRYw+2Yi3KjIBRAm51UI4gKxMei+f/f3PsQNU3SXtzOdGfWo0W4wBGFau3b28HBwYGYU1a85JSuOxfNZ/w6p/rem895TzQWTfOtxjP1qWCDtJoLK1WyMcM+VUUu1pJ3ls6nSDEW1UpTvSLBWFRf0iQZXwn93jFuhd7fK/2SJhgL9Hh0ecp5P4tn3xzwYmPhX0En2SL7nXkirEIPNA/xspAIL9Cw9CUmsV85dG3bBcjNgSUjeVJcykeG9nrtAmX9/MNJtk9Yk7B5cqbLvymsdwjr2LOmBIVtU3OMQ9xGJIQOQHSFGzBegR5zoV4Qj7DeQiumbVGIx26gEXICpAvr4bqlHe5r04WWhB1BQvsdwo5uX4/GvxCGgejBMv4mJpwZjoY0IY7C9nSZNB+jI1DY8tXfsJGVCi3Rt8tUjBoDelrn5mbBJxVi29qqG60XXDLtqFjYXudQd1N8VqEQUUNPTNA/jhCyE0cHRUNMEiq+cbiwV2E3cFTvGKHjqQ34bB0Jespy1NlkIQwR0aG7I2iOJwmVje1BG6atbwpQxbUqZYRq3ej9NIJ1GjGHwk21SKgiFndL7xQU0jvFLlWERJhHE3ehuQnTNI2WZmOxUQuhcDsK44xzJCx5vdyRJFzRYQShf6xQ+U8J9VOh3inU4NMAaTULccWUmopUrRQ3kAkfqQJgn1TsFBpaO+77hHp+xOwXmo9DhNVoOLipMlKh0dibd8waLq7HWDBGJDQJ/IgwM3zHIm5JlpQ33CV/wZ6wj1t7UT4KaLY5R4noMyB3EXN32BRiRHLF8H2rnRAt/JY65zJfLv8iPWf5l2Q7/ptxcHDw//IHYWiLelDcDu8AAAAASUVORK5CYII="
};
class PopsFolder {
constructor(details) {
const guid = popsUtils.getRandomGUID();
const PopsType = "folder";
let config = PopsFolderConfig();
config = popsUtils.assign(config, GlobalConfig.getGlobalConfig());
config = popsUtils.assign(config, details);
config = PopsHandler.handleOnly(PopsType, config);
const { $shadowContainer, $shadowRoot } = PopsHandler.handlerShadow(config);
PopsHandler.handleInit($shadowRoot, [
pops.config.cssText.index,
pops.config.cssText.ninePalaceGridPosition,
pops.config.cssText.scrollbar,
pops.config.cssText.button,
pops.config.cssText.anim,
pops.config.cssText.common,
pops.config.cssText.folderCSS
]);
Folder_ICON.docx = Folder_ICON.doc;
Folder_ICON.rtf = Folder_ICON.doc;
Folder_ICON.xlsx = Folder_ICON.xls;
Folder_ICON.pptx = Folder_ICON.ppt;
Folder_ICON.dmg = Folder_ICON.ipa;
Folder_ICON.json = Folder_ICON.js;
let zipIconList = [
"rar",
"7z",
"arj",
"bz2",
"cab",
"iso",
"jar",
"lz",
"lzh",
"tar",
"uue",
"xz",
"z",
"zipx",
"zst",
"001"
];
let imageIconList = ["jpg", "jpeg", "ico", "webp"];
let codeLanguageIconList = [
"htm",
"py",
"vue",
"bat",
"sh",
"vbs",
"java",
"kt"
];
let androidIconList = ["apk", "apkm", "xapk"];
zipIconList.forEach((keyName) => {
Folder_ICON[keyName] = Folder_ICON.zip;
});
imageIconList.forEach((keyName) => {
Folder_ICON[keyName] = Folder_ICON.png;
});
codeLanguageIconList.forEach((keyName) => {
Folder_ICON[keyName] = Folder_ICON.html;
});
androidIconList.forEach((keyName) => {
Folder_ICON[keyName] = Folder_ICON.apk;
});
if (details == null ? void 0 : details.folder) {
config.folder = details.folder;
}
let zIndex = PopsHandler.handleZIndex(config.zIndex);
let maskHTML = PopsElementHandler.getMaskHTML(guid, zIndex);
let headerBtnHTML = PopsElementHandler.getHeaderBtnHTML(PopsType, config);
let bottomBtnHTML = PopsElementHandler.getBottomBtnHTML(PopsType, config);
let { headerStyle, headerPStyle } = PopsElementHandler.getHeaderStyle(PopsType, config);
let animHTML = PopsElementHandler.getAnimHTML(guid, PopsType, config, `
${config.content.text}
`}
${config.title.html ? config.title.text : `
${config.title.text}
`} ${headerBtnHTML}|
文件名
|
修改时间
|
大小
|
|---|
${latestTime}
`;
fileFormatSize.innerHTML = `
${fileSize}
`;
let __value__ = {
fileName: origin_fileName,
latestTime: origin_latestTime,
fileSize: origin_fileSize,
isFolder
};
fileNameElement["__value__"] = __value__;
fileTimeElement["__value__"] = __value__;
fileFormatSize["__value__"] = __value__;
folderELement["__value__"] = __value__;
folderELement.appendChild(fileNameElement);
folderELement.appendChild(fileTimeElement);
folderELement.appendChild(fileFormatSize);
return {
folderELement,
fileNameElement,
fileTimeElement,
fileFormatSize
};
}
function createMobileFolderRowElement(fileName, latestTime = "-", fileSize = "-", isFolder = false) {
let origin_fileName = fileName;
let origin_latestTime = latestTime;
let origin_fileSize = fileSize;
let folderELement = popsDOMUtils.createElement("tr");
let fileNameElement = popsDOMUtils.createElement("td");
let fileType = "";
let fileIcon = Folder_ICON.folder;
if (isFolder) {
latestTime = "";
fileSize = "";
} else {
fileIcon = "";
if (typeof latestTime === "number") {
latestTime = popsUtils.formatTime(latestTime);
}
if (typeof fileSize === "number") {
fileSize = popsUtils.formatByteToSize(fileSize);
}
for (let keyName in Folder_ICON) {
if (fileName.toLowerCase().endsWith("." + keyName)) {
fileType = keyName;
fileIcon = Folder_ICON[keyName];
break;
}
}
if (!Boolean(fileIcon)) {
fileType = "Null";
fileIcon = Folder_ICON.Null;
}
}
folderELement.className = "pops-folder-list-table__body-row";
fileNameElement.className = "pops-folder-list-table__body-td";
fileNameElement.innerHTML = `
${fileName}
${latestTime} ${fileSize}
${formConfig.description}
`; } liElement.innerHTML = /*html*/ `${formConfig.text}
${leftDescriptionText}${formConfig.description}
`; } liElement.innerHTML = `${formConfig.text}
${leftDescriptionText}${formConfig.description}
`; } liElement.innerHTML = /*html*/ `${formConfig.text}
${leftDescriptionText}${formConfig.description}
`; } liElement.innerHTML = `${formConfig.text}
${leftDescriptionText}${formConfig.description}
`; } liElement.innerHTML = `${formConfig.text}
${leftDescriptionText}${formConfig.description}
`; } liElement.innerHTML = /*html*/ `${formConfig.text}
${leftDescriptionText}${formConfig.description}
`; } liElement.innerHTML = /*html*/ `${formConfig.text}
${leftDescriptionText}${formConfig.description}
`; } liElement.innerHTML = /*html*/ `${formConfig.text}
${leftDescriptionText}${formConfig.description}
`; } let arrowRightIcon = typeof formConfig.arrowRightIcon === "boolean" ? formConfig.arrowRightIcon : true; let arrowRightIconHTML = ""; if (arrowRightIcon) { arrowRightIconHTML = `${pops.config.iconSVG.arrowRight}`; } let rightText = ""; if (formConfig.rightText) { rightText = /*html*/ `${formConfig.rightText}
`; } $li.innerHTML = /*html*/ `${formConfig.text}
${leftDescriptionText}
${rightText}
${arrowRightIconHTML}
`;
const PopsPanelDeepMenu = {
[Symbol.toStringTag]: "PopsPanelDeepMenu",
$ele: {
get parentSection() {
return that.$el.$contentSectionContainer;
}
},
init() {
this.setLiClickEvent();
},
/**
* 生成配置每一项的元素
* @param $container
* @param formItemConfig
*/
initFormItem($container, formItemConfig) {
let formConfig_forms = formItemConfig;
if (formConfig_forms["type"] === "forms") {
let childForms = formConfig_forms["forms"];
let formContainerListElement = document.createElement("li");
let formContainerULElement = document.createElement("ul");
formContainerULElement.classList.add("pops-panel-forms-container-item-formlist");
formContainerListElement.classList.add("pops-panel-forms-container-item");
let formHeaderDivElement = popsDOMUtils.createElement("div", {
className: "pops-panel-forms-container-item-header-text"
});
formHeaderDivElement.innerHTML = formConfig_forms["text"];
if (formConfig_forms.isFold) {
formHeaderDivElement.innerHTML = /*html*/
`
${formConfig_forms.text}
`; popsDOMUtils.on(formHeaderDivElement, "click", (event) => { if (formContainerListElement.hasAttribute("data-fold-enable")) { formContainerListElement.removeAttribute("data-fold-enable"); } else { formContainerListElement.setAttribute("data-fold-enable", ""); } }); formHeaderDivElement.classList.add("pops-panel-forms-fold-container"); formHeaderDivElement.classList.add("pops-user-select-none"); formContainerListElement.setAttribute("data-fold-enable", ""); formContainerListElement.classList.add("pops-panel-forms-fold"); formContainerListElement.appendChild(formHeaderDivElement); } else { formContainerListElement.appendChild(formHeaderDivElement); } that.setElementClassName(formContainerListElement, formItemConfig.className); that.setElementAttributes(formContainerListElement, formItemConfig.attributes); that.setElementProps(formContainerListElement, formItemConfig.props); childForms.forEach((childFormConfig) => { that.uListContainerAddItem(childFormConfig, { ulElement: formContainerULElement, sectionContainerULElement: that.sectionContainerULElement, formContainerListElement, formHeaderDivElement }); }); formContainerListElement.appendChild(formContainerULElement); $container.appendChild(formContainerListElement); if (typeof formConfig_forms.afterAddToUListCallBack === "function") { formConfig_forms.afterAddToUListCallBack(formConfig, { target: formContainerListElement, ulElement: formContainerULElement, sectionContainerULElement: that.sectionContainerULElement, formContainerListElement, formHeaderDivElement }); } } else { that.uListContainerAddItem(formConfig, { ulElement: that.sectionContainerULElement }); } }, /** * 前往子菜单 * @param event 点击事件 * @param liElement 当前的${headerTitleText}
` }); let $headerLeftArrow = popsDOMUtils.createElement("i", { className: "pops-panel-deepMenu-container-left-arrow-icon", innerHTML: pops.config.iconSVG.arrowLeft }); popsDOMUtils.on($headerLeftArrow, "click", void 0, (event2) => { event2 == null ? void 0 : event2.preventDefault(); event2 == null ? void 0 : event2.stopPropagation(); let $prev = $deepMenuContainer.previousElementSibling; popsDOMUtils.cssShow($prev); $deepMenuContainer.remove(); }, { once: true }); (_a2 = $header.firstElementChild) == null ? void 0 : _a2.insertAdjacentElement("beforebegin", $headerLeftArrow); $deepMenuHeaderUL.appendChild($header); $deepMenuContainer.appendChild($deepMenuHeaderUL); $deepMenuContainer.appendChild($deepMenuBodyUL); if (formConfig.forms && Array.isArray(formConfig.forms)) { for (let index = 0; index < formConfig.forms.length; index++) { let formItemConfig = formConfig.forms[index]; this.initFormItem($deepMenuBodyUL, formItemConfig); } } (_b = that.$el.$content) == null ? void 0 : _b.appendChild($deepMenuContainer); if (typeof formConfig.afterEnterDeepMenuCallBack === "function") { formConfig.afterEnterDeepMenuCallBack(formConfig, { sectionContainer: $deepMenuContainer, sectionContainerHeaderContainer: $deepMenuHeaderUL, sectionContainerHeader: $header, sectionBodyContainer: $deepMenuBodyUL }); } }, /** 设置项的点击事件 */ setLiClickEvent() { popsDOMUtils.on($li, "click", void 0, async (event) => { if (typeof formConfig.clickCallBack === "function") { let result2 = await formConfig.clickCallBack(event, formConfig); if (result2) { return; } } this.gotoDeepMenu(event, $li); }); } }; PopsPanelDeepMenu.init(); $li["data-deepMenu"] = PopsPanelDeepMenu; return $li; }, /** * 获取中间容器的元素${formConfig_forms.text}
`; popsDOMUtils.on(formHeaderDivElement, "click", (event) => { if (formContainerListElement.hasAttribute("data-fold-enable")) { formContainerListElement.removeAttribute("data-fold-enable"); } else { formContainerListElement.setAttribute("data-fold-enable", ""); } }); formHeaderDivElement.classList.add("pops-panel-forms-fold-container"); formHeaderDivElement.classList.add("pops-user-select-none"); formContainerListElement.setAttribute("data-fold-enable", ""); formContainerListElement.classList.add("pops-panel-forms-fold"); formContainerListElement.appendChild(formHeaderDivElement); } else { formContainerListElement.appendChild(formHeaderDivElement); } that.setElementClassName(formContainerListElement, formConfig.className); that.setElementAttributes(formContainerListElement, formConfig.attributes); that.setElementProps(formContainerListElement, formConfig.props); childForms.forEach((childFormConfig) => { that.uListContainerAddItem(childFormConfig, { ulElement: formContainerULElement, sectionContainerULElement: that.sectionContainerULElement, formContainerListElement, formHeaderDivElement }); }); formContainerListElement.appendChild(formContainerULElement); that.sectionContainerULElement.appendChild(formContainerListElement); if (typeof formConfig_forms.afterAddToUListCallBack === "function") { formConfig_forms.afterAddToUListCallBack(formConfig_forms, { target: formContainerListElement, ulElement: formContainerULElement, sectionContainerULElement: that.sectionContainerULElement, formContainerListElement, formHeaderDivElement }); } } else { that.uListContainerAddItem(formConfig, { ulElement: that.sectionContainerULElement }); } }, /** * * @param formConfig * @param containerOptions */ uListContainerAddItem(formConfig, containerOptions) { let itemLiElement = this.createSectionContainerItem(formConfig); if (itemLiElement) { containerOptions["ulElement"].appendChild(itemLiElement); } if (typeof formConfig.afterAddToUListCallBack === "function") { formConfig.afterAddToUListCallBack(formConfig, { ...containerOptions, target: itemLiElement }); } }, /** * 为左侧容器元素添加点击事件 * @param asideLiElement 左侧的容器
${config.title.html ? config.title.text : `
${config.title.text}
`} ${headerBtnHTML}-
${config.toSearhNotResultHTML}
${detail.tag == null ? detail.text : Tag[detail.tag] + detail.text}
${detail.description || ""}
` ) }); let $leftText = $item.querySelector( ".pops-panel-item-left-main-text" ); let classNameList = ["support-info"]; if (detail.tag != null) { classNameList.push(detail.tag); } domUtils.addClass($leftText, classNameList); liElement.appendChild($item); return liElement; }, afterAddToUListCallBack(formConfig, container) { let detail = config(); if (typeof detail.afterRender === "function") { let $target = container.target; let $leftContainer = $target.querySelector( ".pops-panel-item-left-text" ); let $text = $target.querySelector( ".pops-panel-item-left-main-text" ); let $desc = $target.querySelector( ".pops-panel-item-left-desc-text" ); detail.afterRender({ ...container, $leftContainer, $leftText: $text, $leftDesc: $desc }); } } }; return result2; }; const CommonUtil = { /** * 添加屏蔽CSS * @param args * @example * addBlockCSS("") * addBlockCSS("","") * addBlockCSS(["",""]) */ addBlockCSS(...args2) { let selectorList = []; if (args2.length === 0) { return; } if (args2.length === 1 && typeof args2[0] === "string" && args2[0].trim() === "") { return; } args2.forEach((selector) => { if (Array.isArray(selector)) { selectorList = selectorList.concat(selector); } else { selectorList.push(selector); } }); return addStyle(`${selectorList.join(",\n")}{display: none !important;}`); }, /** * 设置GM_getResourceText的style内容 * @param resourceMapData 资源数据 */ setGMResourceCSS(resourceMapData) { let cssText = typeof _GM_getResourceText === "function" ? _GM_getResourceText(resourceMapData.keyName) : ""; if (typeof cssText === "string" && cssText) { addStyle(cssText); } else { CommonUtil.addLinkNode(resourceMapData.url); } }, /** * 添加标签 * @param url */ async addLinkNode(url) { let $link = document.createElement("link"); $link.rel = "stylesheet"; $link.type = "text/css"; $link.href = url; domUtils.ready(() => { document.head.appendChild($link); }); return $link; }, /** * 将url修复，例如只有search的链接/sss/xxx?sss=xxxx * @param url 需要修复的链接 */ fixUrl(url) { url = url.trim(); if (url.match(/^http(s|):\/\//i)) { return url; } else { if (!url.startsWith("/")) { url += "/"; } url = window.location.origin + url; return url; } }, /** * html转义 * @param unsafe */ escapeHtml(unsafe) { return unsafe.replace(/&/g, "&").replace(//g, ">").replace(/"/g, """).replace(/'/g, "'").replace(/©/g, "©").replace(/®/g, "®").replace(/™/g, "™").replace(/→/g, "→").replace(/←/g, "←").replace(/↑/g, "↑").replace(/↓/g, "↓").replace(/—/g, "—").replace(/–/g, "–").replace(/…/g, "…").replace(/ /g, " ").replace(/\r\n/g, "").replace(/\r/g, "
").replace(/\n/g, "
").replace(/\t/g, " "); } }; const GlobalUtil = { getWindow() { return GMTotal.unsafeWindow.isSupport() ? _unsafeWindow : window; } }; class ApiTest_addElement extends ApiTestBase { getApiName() { return "GM_addElement"; } getAsyncApiOption() { return { name: "GM.addElement", isSupport: this.isSupportGM() && typeof _GM.addElement === "function" }; } isSupport() { return typeof _GM_addElement === "function"; } getUIOption() { let apiName = this.getApiName(); let apiAsyncInfo = this.getAsyncApiOption(); let result2 = { id: "aside-" + apiName, title: apiName, headerTitle: `${apiName} & ${apiAsyncInfo.name}`, scrollToDefaultView: true, isDefault() { return StorageApi.get(PanelKeyConfig.asideLastVisit) === apiName; }, callback(data) { StorageApi.set(PanelKeyConfig.asideLastVisit, apiName); }, forms: [ { type: "forms", text: "函数测试", forms: [ UIInfo( () => this.isSupport() ? { text: "支持 " + apiName, tag: "success" } : { text: "不支持 " + apiName, tag: "error" } ), UIInfo( () => apiAsyncInfo.isSupport ? { text: "支持 " + apiAsyncInfo.name, tag: "success" } : { text: "不支持 " + apiAsyncInfo.name, tag: "error" } ) ] }, { type: "forms", text: "功能测试", forms: [] } ] }; if (this.isSupport()) { result2["forms"][1].forms.push( UIInfo(() => { let $test = null; let $page_test = null; try { let win = GlobalUtil.getWindow(); let element_id = "GM_addElement_test_script_exec"; $test = _GM_addElement("script", { id: element_id, textContent: 'window.GM_addElement_test_str = "bar";' }); $page_test = document.querySelector("#" + element_id); if ($test == null) { return { text: "GM_addElement is not retrun element", tag: "error" }; } if (typeof win["GM_addElement_test_str"] !== "string") { return { text: "GM_addElement script element is not work", tag: "error" }; } Reflect.deleteProperty(win, "GM_addElement_test_str"); return { text: CommonUtil.escapeHtml("支持添加